iota-hook
v0.0.2
Published
Manage your components effects and state with methods.
Downloads
8
Readme
💫 Iota
Manage stateful logic with class methods like the good ol' times, but with reuable hooks.
Install
npm install iota-hook
Quickstart
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'
const useLocationHook = createIota({
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>
);
}
Create