3.0.2 • Published 1 year ago
react-ob v3.0.2
react-ob
Only use observer do react state, only 0.4kb in gzip.
start
- Add
ObProvider
in App.tsx
<ObProvider>
<App />
</ObProvider>
- Use
useChannel
andOb
in Page
function Page() {
const value = useChannel(0);
return (
<div>
<Ob channels={[value]}>{(value) => <div>num: {value}</div>}</Ob>
<button onClick={() => value.set(value() + 1)}></button>
</div>
);
}
- Use global
channel
:
const name = channel("");
function UserPage() {
return (
<Subscribe channels={[name]}>
{(_name) => <div>User name: {_name}</div>}
</Subscribe>
);
}
function UserSettingPage() {
return (
<div>
<div> setting username:</div>
<input onChange={(e) => name.set(e.target.value)} />
</div>
);
}
- Use localStorage
channel
:
const name = channelWithStorage("user-name", "");
function UserPage() {
return (
<Subscribe channels={[name]}>
{(_name) => <div>User name: {_name}</div>}
</Subscribe>
);
}
function UserSettingPage() {
return (
<div>
<div> setting username:</div>
<input onChange={(e) => name.set(e.target.value)} />
</div>
);
}
3.0.2
1 year ago
3.0.1
1 year ago
3.0.0
1 year ago
2.2.1
2 years ago
2.2.0
2 years ago
2.2.3
2 years ago
2.2.2
2 years ago
2.2.5
2 years ago
2.2.4
2 years ago
2.2.7
2 years ago
2.2.6
2 years ago
2.1.2
2 years ago
2.1.1
2 years ago
2.1.0
2 years ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.1.2
2 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.0
4 years ago
0.8.1
4 years ago
0.8.0
4 years ago
0.7.0
4 years ago
0.6.0
4 years ago
0.5.0
4 years ago