React Native Use Persisted State
Preview
Introduce
Usage
import {View, Text, Button} from 'react-native';
import {usePersistedState} from 'react-native-use-persisted-state';
const Counter = () => {
const [count, setCount] = usePersistedState('@count', 0);
return (
<View>
<Text>count : {count}</Text>
<Button onPress={() => setCount(count + 1)} title="increment" />
<Button onPress={() => setCount(count - 1)} title="decrement" />
</View>
);
};
Getting started
First, Install react-native-use-persisted-state & @react-native-async-storage/async-storage
yarn add react-native-use-persisted-state @react-native-async-storage/async-storage
Second, Pod intsall
cd ios && pod install
Third, Add provider
// App.js
...
import {PersistedStateProvider} from 'react-native-use-persisted-state' // here
const App = () => {
return (
<PersistedStateProvider> // here
<.../>
</PersistedStateProvider> // here
);
};
API
usePersistedState
Params
usePersistedState<T>(key, initialState);
| name | type | require | default | description |
|---|---|---|---|---|
| key | string |
|
key used to store storage | |
| initialState | T |
undefined |
Returns
const [state, setState, clear] = usePersistedState<T>(...);
| name | type | description |
|---|---|---|
| state | T |
same as react state const [state] = useState() |
| setState | (v:T) => void |
same as react setState const [..., setState] = useState() |
| clear | () => void |
clear storage and init state to initialState |
7 Dec 21, 2022
7 May 2, 2022
28 Dec 4, 2022
3 Jan 30, 2022
605 Dec 30, 2022
9 Nov 23, 2022
30 Dec 30, 2022
56 Dec 19, 2022
23 Sep 1, 2022
51 Sep 29, 2022