Manage stateful logic with class methods like the good ol' times, but with reuable hooks.
npm install iota-hook
Create a ususable instance of iota to grab a remote api data via debounce from incoming props
import createIota from 'iota-hook'
import debounce from 'lodash.debounce'
import searchQuery from './searchQuery'
interface LocationSearchProps {
query: string
}
interface LocationSearchState {
searchResults: string[]
}
interface LocationCustomMethods = {
search: (query: string) => Promise<void>
}
interface LocationSearchResults = {
results: { city: string, country: string }[]
amount: number
}
const useLocationHook = createIota<LocationSearchProps, LocationSearchState, LocationCustomMethods, LocationSearchResults>({
init: (self) => {
self.state = { searchResults: [] }
},
didUpdate: (self) => {
const { props, prevProps } = self
if (props.query !== prevProps.query) {
self.search(props.query)
}
},
didMount: (self) => {
self.search = debounce(self.search, 1000)
},
search: async (self, arg) => {
const results = await searchQuery(arg)
self.setState({ searchResults: results })
},
render: (self) => {
const { state } = self
return {
results: state.searchResults.map((location) => {
const [city, country] = location.split(', ')
return { city, country }
}),
amount: state.searchResults.length
}
}
})
Then you can reuse this in any component
import useLocationHook from './useLocationHook'
function App () {
const [searchText, setSearchText] = React.useState('')
const data = useLocationHook({ query: searchText })
console.log({ data }) // data is data created from render method in iota hook
return (
<div>
<input type='text' onChange={e => setSearchText(e.target.value)} />
</div>
)
}