Skip to content

Instantly share code, notes, and snippets.

@crazy4groovy
Last active October 23, 2018 00:18
Show Gist options
  • Save crazy4groovy/724813c4d9c2399bc7ade1e1f48ebb0e to your computer and use it in GitHub Desktop.
Save crazy4groovy/724813c4d9c2399bc7ade1e1f48ebb0e to your computer and use it in GitHub Desktop.
CSS-based, dynamic list search/filter with *insane* render performance - jets.js.org
/**
* Inspired by: https://jets.js.org
**/
import React from 'react'
import PropTypes from 'prop-types'
const style = Object.freeze({
borderRadius: '5px',
padding: '.1em'
})
const filteringStyle = Object.freeze({
backgroundColor: 'lightyellow',
border: '2px solid yellow'
})
class Jets extends React.Component {
static propTypes = {
attr: PropTypes.string,
filteringStyle: PropTypes.object,
placeholder: PropTypes.string,
selector: PropTypes.string,
style: PropTypes.object
}
static defaultProps = {
attr: 'jets',
filteringStyle,
placeholder: 'Search...',
selector: '.jets-item',
style
}
state = {
filterBy: ''
}
render() {
const { filterBy } = this.state
const {
attr,
filteringStyle,
placeholder,
selector,
style
} = this.props
const cssStyle = filterBy
? `${selector}:not([data-${attr} *= "${filterBy.toLowerCase()}"]) { display: none }`
: ''
return (
<span>
<input
type="text"
value={filterBy}
placeholder={placeholder}
onChange={({ target }) => this.setState({ filterBy: target.value })}
onKeyDown={({ keyCode }) => (keyCode === 27) && this.setState({ filterBy: '' })}
style={Object.assign({}, style, filterBy && filteringStyle)}
/>
<style>{cssStyle}</style>
</span>
)
}
}
export default Jets
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment