@@ -157,7 +169,8 @@ export const ReusedKeyExample: React.FunctionComponent = () => {
export const CustomHookExample: React.FunctionComponent = () => {
// This could be exported from its own file and imported in multiple component files.
- const useMyStoredValue = () => useLocalStorage('myStoredValue', 'default defined once');
+ const useMyStoredValue = () =>
+ useLocalStorage({ key: 'myStoredValue', defaultValue: 'default defined once' });
// In a real app each of these components would be in separate files.
const ComponentA: React.FunctionComponent = () => {
@@ -176,7 +189,7 @@ export const CustomHookExample: React.FunctionComponent = () => {
);
};
const ComponentB: React.FunctionComponent = () => {
- const [value] = useLocalStorage('exampleReusedKey', 'default value here');
+ const [value] = useMyStoredValue();
return (
@@ -197,7 +210,7 @@ export const CustomHookExample: React.FunctionComponent = () => {
export const ComplexValueExample: React.FunctionComponent = () => {
type Item = { name: string; description?: string };
- const [items, setItems] = useLocalStorage('exampleArray', []);
+ const [items, setItems] = useLocalStorage({ key: 'exampleArray', defaultValue: [] });
const addForm = useFormState({
name: useFormField('', yup.string().required().label('Name')),
diff --git a/src/hooks/useStorage/useSessionStorage.stories.mdx b/src/hooks/useStorage/useSessionStorage.stories.mdx
index 37f0306..aba4e79 100644
--- a/src/hooks/useStorage/useSessionStorage.stories.mdx
+++ b/src/hooks/useStorage/useSessionStorage.stories.mdx
@@ -28,7 +28,7 @@ and it supports TypeScript [generics](https://www.typescriptlang.org/docs/handbo
infer its return types based on the `defaultValue`.
```ts
-const [value, setValue] = useSessionStorage(key: string, defaultValue: T);
+const [value, setValue] = useSessionStorage({ key: string, defaultValue: T });
```
## Notes
diff --git a/src/hooks/useStorage/useSessionStorage.stories.tsx b/src/hooks/useStorage/useSessionStorage.stories.tsx
index 1809ff8..b33a815 100644
--- a/src/hooks/useStorage/useSessionStorage.stories.tsx
+++ b/src/hooks/useStorage/useSessionStorage.stories.tsx
@@ -18,7 +18,7 @@ import { ValidatedTextInput } from '../../components/ValidatedTextInput';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
export const PersistentCounterExample: React.FunctionComponent = () => {
- const [count, setCount] = useSessionStorage('exampleCounter', 0);
+ const [count, setCount] = useSessionStorage({ key: 'exampleCounter', defaultValue: 0 });
return (
{
};
export const PersistentTextFieldExample: React.FunctionComponent = () => {
- const [value, setValue] = useSessionStorage('exampleTextField', '');
+ const [value, setValue] = useSessionStorage({ key: 'exampleTextField', defaultValue: '' });
return (
{
export const ComplexValueExample: React.FunctionComponent = () => {
type Item = { name: string; description?: string };
- const [items, setItems] = useSessionStorage('exampleArray', []);
+ const [items, setItems] = useSessionStorage({ key: 'exampleArray', defaultValue: [] });
const addForm = useFormState({
name: useFormField('', yup.string().required().label('Name')),
diff --git a/src/hooks/useStorage/useStorage.ts b/src/hooks/useStorage/useStorage.ts
index 7e4805b..06e8152 100644
--- a/src/hooks/useStorage/useStorage.ts
+++ b/src/hooks/useStorage/useStorage.ts
@@ -35,30 +35,38 @@ const setValueInStorage = (storageType: StorageType, key: string, newValue: T
}
};
-const useStorage = (
- storageType: StorageType,
- key: string,
- defaultValue: T
-): [T, React.Dispatch>] => {
+interface IUseStorageOptions {
+ isEnabled?: boolean;
+ type: StorageType;
+ key: string;
+ defaultValue: T;
+}
+
+const useStorage = ({
+ isEnabled = true,
+ type,
+ key,
+ defaultValue,
+}: IUseStorageOptions): [T, React.Dispatch>] => {
const [cachedValue, setCachedValue] = React.useState(
- getValueFromStorage(storageType, key, defaultValue)
+ getValueFromStorage(type, key, defaultValue)
);
- const usingStorageEvents = storageType === 'localStorage' && typeof window !== 'undefined';
+ const usingStorageEvents = type === 'localStorage' && typeof window !== 'undefined' && isEnabled;
const setValue: React.Dispatch> = React.useCallback(
(newValueOrFn: T | ((prevState: T) => T)) => {
const newValue =
newValueOrFn instanceof Function
- ? newValueOrFn(getValueFromStorage(storageType, key, defaultValue))
+ ? newValueOrFn(getValueFromStorage(type, key, defaultValue))
: newValueOrFn;
- setValueInStorage(storageType, key, newValue);
+ setValueInStorage(type, key, newValue);
if (!usingStorageEvents) {
// The cache won't update automatically if there is no StorageEvent dispatched.
setCachedValue(newValue);
}
},
- [storageType, key, defaultValue, usingStorageEvents]
+ [type, key, defaultValue, usingStorageEvents]
);
React.useEffect(() => {
@@ -77,12 +85,13 @@ const useStorage = (
return [cachedValue, setValue];
};
+export type UseStorageTypeOptions = Omit, 'type'>;
+
export const useLocalStorage = (
- key: string,
- defaultValue: T
-): [T, React.Dispatch>] => useStorage('localStorage', key, defaultValue);
+ options: UseStorageTypeOptions
+): [T, React.Dispatch>] => useStorage({ ...options, type: 'localStorage' });
export const useSessionStorage = (
- key: string,
- defaultValue: T
-): [T, React.Dispatch>] => useStorage('sessionStorage', key, defaultValue);
+ options: UseStorageTypeOptions
+): [T, React.Dispatch>] =>
+ useStorage({ ...options, type: 'sessionStorage' });
diff --git a/src/index.ts b/src/index.ts
index 10a04ca..8e44aaa 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,6 @@ export * from './components/StatusIcon';
export * from './components/ValidatedTextInput';
export * from './components/ResolvedQuery';
export * from './components/LoadingEmptyState';
-export * from './components/LabelCustomColor';
export * from './hooks/useSelectionState';
export * from './hooks/useFormState';