コンテンツにスキップ

createBooleanState

真偽値操作のための便利なメソッドを備えたリアクティブな真偽値状態を作成します。 createState を拡張し、toggle、setTrue、setFalse などの真偽値専用ヘルパーを提供します。

import type * as React from 'react';
import { createBooleanState } from 'synstate';
import { useObservableValue } from 'synstate-react-hooks';
// Menu drawer open/close state.
// setTrue and setFalse can be passed directly as callbacks — no need to
// create wrapper functions like `() => setState(true)`.
const [menuOpen$, { setTrue: openMenu, setFalse: closeMenu }] =
createBooleanState(false);
const SampleComponent = (): React.JSX.Element => (
<MenuDrawer
open={useObservableValue(menuOpen$)}
onClose={closeMenu}
onOpen={openMenu}
/>
);

等しい更新を伝えない(equals)

Section titled “等しい更新を伝えない(equals)”

第 2 引数で createState と同じ equals オプションを指定できます。

equals の既定値は Object.is で、すでに持っている値を書き込んでも何も伝わりません。等しいかどうかにかかわらずすべての更新を伝えるには equals: () => false を渡してください。

View source on GitHub