README
react-kefir-hook
Simple hook that allows to use kefir.js streams and properties in react components
Kefir.js is a reactive framework with very high performance.
Usage
Hook's callback must return a kefir Stream
or Property
If you use a Stream
, returned value will always by undefined
until a stream emits any value
// valueFromStream will initially be `undefined`, later it will contain values that the stream emits
const valueFromStream = useStream(() => myStream)
If you use a Property
, returned value will always contain a value
// valueFromProperty will contain current value as well as next values emitted by the property
const valueFromProperty = useStream(() => myProperty)
Stream dependencies
Hook uses dependencies like useEffect
does, but as a third parameter (second one is initialValue
)
Usage without dependencies.
Stream will be fetched once per component mount (or more exactly memoized with React.useMemo).
import { useStream } from 'react-kefir-hook'
const SmallServerStatusButton = () => {
// connectionState$ is a kefir stream or property
const connectionStatus = useStream(() => connectionState$)
return <div>
{connectionStatus ? <h1>connected</h1> : <h1>diconnected</h1>}
</div>
}
Usage with dependencies.
Stream will be fetched whenever dependencies change.
import { useStream } from 'react-kefir-hook'
const SmallServerStatusButton = () => {
const userData = useStream(() => getUserDataStream(userId), undefined, [userId])
return <div>
{userData ? <h1>{userData.name}</h1> : <h1>{loading...}</h1>}
</div>
}
Initial data
Kefir stream will be activated when the useStream
is used.
If the stream returns the value synchronously (Property with an initialValue or an already active Property),
the value will be used as a return from useStream
.
If provided stream will not return a value upon activation, an undefined
or initialValue
(2th argument for useStream
) will be returned initially and
component will rerender and a new value will be returned whenever the stream emits.
import { constant, later } from 'kefir'
import { useStream } from 'react-kefir-hook'
const SmallServerStatusButton = () => {
const helloProperty = useStream(() => constant('hello'))
const helloStream = useStream(() => later(1000, 'hello'))
const helloStreamWithInitial = useStream(() => later(1000, 'hello'),'I am initial')
return <div>
<div>Prop: {helloProperty}</div>
<div>Stream: {helloStream}</div>
<div>Stream with initial: {helloStreamWithInitial}</div>
</div>
}
You will see two renders:
First:
Prop: hello
Stream:
Stream with initial: I am initial
Then, about a second later, when later(1000, 'hello')
emits a value:
Prop: hello
Stream: hello
Stream with initial: hello