useRefract
Used to create a custom hook.
useRefract
is provided by our React packages - refract-*
. It is only available for versions of React supporting hooks (React 16.7.0-alpha.0 and above).const useRefract = useRefract(aperture, data, {
handler,
errorHandler
})
- 1.
aperture
(function): a function which observes data sources within your app, passes this data through any necessary logic flows, and outputs a stream ofeffect
values in response.Signature:(component, initialData) => { return effectStream }
.- The
initialData
passed to the hook (second argument). - The
component
is an object which lets you observe: see Observing React. Theobserve
method allows you to observedata
passed to your hook. - Within the body of the function, you observe the event source you choose, pipe the events through your stream library of choice, and return a single stream of effects.
- 2.
data
(object): an object of data (state, props, context) passed to your hook. - 3.
handler
(function): a optional function which causes side-effects in response toeffect
values.Signature:(initialData) => (effect) => { /* handle effect here */ }
- The
initialData
passed to the hook (second argument). - The
effect
is each value emitted by youraperture
. - Within the body of the function, you cause any side-effect you wish.
- 4.
errorHandler
(function): an optional function for catching any unexpected errors thrown within youraperture
. Typically used for logging errors.Signature:(initialData) => (error) => { /* handle error here */ }
- The
initialData
passed to the hook (second argument). - The
error
is each value emitted by youraperture
. - Within the body of the function, you cause any side-effect you wish.
componentData
(any): Refract hooks have a special built-in effect to push data to your component. Effects emitted by your aperture and wrapped with toRender
will be returned by your hook.import { toRender } from 'refract-rxjs'
import { useRefract } from 'refract-rxjs'
const handler = initialData => effect => {
switch (effect.type) {
case 'localstorage':
localStorage.setItem(effect.name, effect.value)
return
}
}
const aperture = (component, initialData) => {
return component.observe('username').pipe(
debounceTime(2000),
map(username => ({
type: 'localstorage',
name: 'username',
value: username
}))
)
}
const BaseComponent = () => {
const [ username, setUsername ] = useState()
useRefract(aperture, { username }, { handler })
return <input value={username} onChange={evt => setUsername(evt.target.value)} />
)
Last modified 4yr ago