Links

useRefract

Used to create a custom hook.

Packages

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).

Signature

const useRefract = useRefract(aperture, data, {
handler,
errorHandler
})

Arguments

  1. 1.
    aperture (function): a function which observes data sources within your app, passes this data through any necessary logic flows, and outputs a stream of effect 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. The observe method allows you to observe data 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. 2.
    data (object): an object of data (state, props, context) passed to your hook.
  3. 3.
    handler (function): a optional function which causes side-effects in response to effect values.
    Signature: (initialData) => (effect) => { /* handle effect here */ }
    • The initialData passed to the hook (second argument).
    • The effect is each value emitted by your aperture.
    • Within the body of the function, you cause any side-effect you wish.
  4. 4.
    errorHandler (function): an optional function for catching any unexpected errors thrown within your aperture. 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 your aperture.
    • Within the body of the function, you cause any side-effect you wish.

Returns

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'

Example

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)} />
)

Tips

Take a look at our recipe for dependency injection into your Refract components.