recoil-sync-next
Recoil Sync stores for Next.js
Features
- URL Persistence
- Syncing an atom with the browser URL.
- Session Storage Persistence Synced with History
- Syncing an atom with the history position.
- Utilities
Installation
npm install recoil recoil-sync recoil-sync-next
# or
yarn add recoil recoil-sync recoil-sync-next
# or
pnpm add recoil recoil-sync recoil-sync-next
URL Persistence
This provides recoil-sync's URL Persistence functionality interfaced with next/router.
A version of
function RecoilURLSyncJSONNext(props: {
storeKey?: string | undefined
location: LocationOption
children: ReactNode
}): ReactNode
Props
storeKey- This prop is used to match up which atoms should sync with this external store. See Syncing with Multiple Storages for more info.
location- Tis prop specifies what part of the URL to sync. See URL Location for more info.
children- React elements in your component tree.
Example
import { RecoilURLSyncJSONNext } from 'recoil-sync-next'
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<RecoilURLSyncJSONNext location={{ part: 'queryParams' }}>
<Component {...pageProps} />
</RecoilURLSyncJSONNext>
</RecoilRoot>
)
}
A version of
function RecoilURLSyncTransitNext(props: {
storeKey?: string | undefined
location: LocationOption
handlers?: ReadonlyArray<TransitHandler<any, any>>
children: ReactNode
}): ReactNode
Props
storeKey- This prop is used to match up which atoms should sync with this external store. See Syncing with Multiple Storages for more info.
location- Tis prop specifies what part of the URL to sync. See URL Location for more info.
handlers- The array of user defined custom encoder/decoder object. See Custom Classes for more info.
children- React elements in your component tree.
Example
import { RecoilURLSyncTransitNext } from 'recoil-sync-next'
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<RecoilURLSyncTransitNext location={{ part: 'queryParams' }}>
<Component {...pageProps} />
</RecoilURLSyncTransitNext>
</RecoilRoot>
)
}
Session Storage Persistence Synced with History
Provides persistence of atoms to session storage synced with the position of the history entry. It will save atoms to session storage when the history entry's position is moved. When the user moves backward/forward on history entries (i.e. 'popstate' event is fired), the atoms saved with that position is restored.
To sync atoms with the position of the history entry using JSON encoding. This should be a child element of
function RecoilHistorySyncJSONNext(props: {
storeKey?: string | undefined
children: ReactNode
}): ReactNode
Props
storeKey- This prop is used to match up which atoms should sync with this external store. See Syncing with Multiple Storages for more info.
children- React elements in your component tree.
Example
import { RecoilHistorySyncJSONNext } from 'recoil-sync-next'
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<RecoilHistorySyncJSONNext>
<Component {...pageProps} />
</RecoilHistorySyncJSONNext>
</RecoilRoot>
)
}
To sync atoms with the position of the history entry using Transit encoding. This should be a child element of
function RecoilHistorySyncTransitNext(props: {
storeKey?: string | undefined
handlers?: ReadonlyArray<TransitHandler<any, any>>
children: ReactNode
}): ReactNode
Props
storeKey- This prop is used to match up which atoms should sync with this external store. See Syncing with Multiple Storages for more info.
handlers- The array of user defined custom encoder/decoder object. See Custom Classes for more info.
children- React elements in your component tree.
Example
import { RecoilHistorySyncTransitNext } from 'recoil-sync-next'
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<RecoilHistorySyncTransitNext>
<Component {...pageProps} />
</RecoilHistorySyncTransitNext>
</RecoilRoot>
)
}
Utilities
atomFamilyWithInitialValue
atomFamily, but initial value can be specified individually.
function atomFamilyWithInitialValue<
T extends SerializableParam,
P extends SerializableParam
>(options: {
key: string
effects?:
| ReadonlyArray<AtomEffect<T>>
| ((param: P) => ReadonlyArray<AtomEffect<T>>)
dangerouslyAllowMutability?: boolean
}): (parameter: P, initialValue: T) => RecoilState<T>
Type Parameters
- T
- The type of the atom value. It must be compared using value-equality and must be serializable.
- P
- The type of the paramter that map to each atom. It must be compared using value-equality and must be serializable.
Parameters
See atomFamily for more info.
Return
A function which takes paramter that map to an atom, and its initialValue.
Example
import { atomFamilyWithInitialValue } from 'recoil-sync-next'
const countState = atomFamilyWithInitialValue<number, string>({
key: 'count',
})
const MyComponent: React.FC = () => {
const [count1, setCount1] = useRecoilState(countState('foo', 0)) // count1 is initialized to 0
const [count2, setCount2] = useRecoilState(countState('bar', 100)) // count2 is initialized to 100
...
}
4 May 3, 2022
14 Jan 3, 2023
5 Oct 3, 2022
6 Oct 26, 2022
5 Apr 1, 2022
8 Oct 31, 2022
4 Jul 11, 2022
10 Nov 15, 2022
159 Dec 10, 2022
5 Dec 8, 2022
6 Oct 7, 2022
5 Nov 11, 2022
2.8k Dec 31, 2022
9 Nov 4, 2022
35 Dec 1, 2022
24 Dec 18, 2022
39 Dec 26, 2022
19 Oct 12, 2022
27 Sep 15, 2022