Copy
1import { observe, transform, useObserver, useObserverValue } from 'react-observing'
2
3const textStore = observe('')
4
5const textSizeStore = transform(textStore, text => text.length)
6
7const Counter = () => {
8  const textSize = useObserverValue(textSizeStore)
9
10  return <p>Length {textSize}</p>
11}
12
13export const WordCounter = () => {
14  const [text, setText] = useObserver(textStore)
15
16  return (
17    <>
18      <Counter />
19      <input value={text} onChange={e => setText(e.target.value)} />
20    </>
21  )
22}