Jonathan Harrell jonathanharrell
jonathanharrell
/ autocomplete.js
Last active
July 7, 2018 20:12
React Autocomplete Component (without Render Props)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Autocomplete extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| results: props.options | |
| } | |
| } | |
| searchList(event) { |
jonathanharrell
/ search-select.js
Last active
July 7, 2018 20:17
React SearchSelect Component (with render props)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class SearchSelect extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| results: props.options | |
| } | |
| } | |
| searchList(event) { | |
| const results = this.props.filterMethod(this.props.options, event.target.value) |
jonathanharrell
/ autocomplete.js
Last active
July 7, 2018 20:31
React Autocomplete Component (with render props)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import SearchSelect from './search-select' | |
| class Autocomplete extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| } | |
| filterMethod (options, query) { | |
| return options.filter(option => option.toLowerCase().includes(query.toLowerCase())) | |
| } |
jonathanharrell
/ tag-list-search.js
Last active
July 7, 2018 20:32
React TagListSearch Component (with render props)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import SearchSelect from './search-select' | |
| class TagListSearch extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| } | |
| filterMethod (options, query) { | |
| return options.filter(option => option.toLowerCase().includes(query.toLowerCase())) | |
| } |
jonathanharrell
/ app.js
Last active
July 7, 2018 20:32
Using ObserveDimensions React Component With Render Props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class App extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| } | |
| render() { | |
| return ( | |
| <div className="wrapper"> | |
| <ObserveDimensions | |
| render={({width, height}) => ( |
jonathanharrell
/ observe-dimensions.js
Last active
July 7, 2018 20:32
ObserveDimensions ReactComponent Using Render Props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class ObserveDimensions extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| width: null, | |
| height: null | |
| } | |
| this.elementToObserve = React.createRef() | |
| } |
jonathanharrell
/ app.js
Last active
July 7, 2018 20:33
Using FetchData React Component with Render Props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class App extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| } | |
| render() { | |
| return ( | |
| <div className="wrapper"> | |
| <FetchData | |
| url="https://jsonplaceholder.typicode.com/todos" |
jonathanharrell
/ fetch-data.js
Last active
July 7, 2018 20:33
FetchData React Component Using Render Props
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class FetchData extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { | |
| loading: false, | |
| results: [], | |
| error: false | |
| } | |
| } |
jonathanharrell
/ search-select.js
Last active
July 7, 2018 20:34
Vue SearchSelect Component (with scoped slots)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Vue.component('search-select', { | |
| props: [ | |
| 'options', | |
| 'filterMethod' | |
| ], | |
| data () { | |
| return { | |
| query: '' | |
| } |
jonathanharrell
/ autocomplete.js
Last active
July 7, 2018 20:35
Vue Autocomplete Component (with scoped slots)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Vue.component('autocomplete', { | |
| data () { | |
| return { | |
| dropdownVisible: false | |
| } | |
| }, | |
| methods: { | |
| filterMethod (options, query) { | |
| return options.filter(option => option.toLowerCase().includes(query.toLowerCase())) |
OlderNewer