summaryrefslogtreecommitdiff
path: root/node_modules/@phntms/use-local-state/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/@phntms/use-local-state/README.md')
-rwxr-xr-xnode_modules/@phntms/use-local-state/README.md103
1 files changed, 103 insertions, 0 deletions
diff --git a/node_modules/@phntms/use-local-state/README.md b/node_modules/@phntms/use-local-state/README.md
new file mode 100755
index 0000000..0b015bf
--- /dev/null
+++ b/node_modules/@phntms/use-local-state/README.md
@@ -0,0 +1,103 @@
+# use-local-state
+
+[![NPM version][npm-image]][npm-url]
+[![Actions Status][ci-image]][ci-url]
+[![PR Welcome][npm-downloads-image]][npm-downloads-url]
+
+A simple React hook that allows you to store data within `LocalStorage` with the same interface as the standard `React.useState` hook.
+
+## Introduction
+
+Just swap out your `useState` calls with `useLocalState` to persist the data between refreshes. This hook is also SSR safe and does not break when used without `window` existing.
+
+```javascript
+import useLocalState from "@phntms/use-local-state";
+
+const [value, setValue, resetValue] = useLocalState("KEY", "");
+```
+
+## Installation
+
+Install this package with `npm`.
+
+```bash
+npm i @phntms/use-local-state
+```
+
+## Usage
+
+Store a boolean to track if a user has accepted terms of use.
+
+```JSX
+import React from 'react';
+import useLocalState from '@phntms/use-local-state';
+
+const TermsExample = () = {
+ const [accepted, setAccepted] = useLocalState("TERMS_ACCEPTED", false);
+
+ return (
+ <>
+ <h1>Welcome</h2>
+ {!accepted && <>
+ <p>Do you accept our terms?</p>
+ <button onClick={()=>setAccepted(true)}>Accept</button>
+ </>}
+ </>
+ );
+}
+```
+
+Store a list of bookmarks.
+
+```JSX
+import React from 'react';
+import useLocalState from '@phntms/use-local-state';
+
+interface Bookmark {
+ title: string;
+ url: string;
+}
+
+const BookmarkExample = () = {
+ const [bookmarks, setBookmarks, clearBookmarks] = useLocalState<Bookmark[]>("BOOKMARKS", []);
+
+ const addBookmark = (bookmark: Bookmark) => setBookmarks([...bookmarks, bookmark]);
+
+ return (
+ <>
+ <h1>Bookmarks</h2>
+ <NewBookmark add={addBookmark} />
+ <button onClick={clearBookmarks}>Clear Bookmarks</button>
+ <ul>
+ {bookmarks.map(((bookmark, i) => (
+ <li key={i}>
+ <a href={bookmark.url}>{bookmark.title}</a>
+ </li>
+ )))}
+ </ul>
+ </>
+ );
+}
+```
+
+## API
+
+### Input
+
+- `key` : Required - The key of type `string` to store within `LocalStorage`.
+- `initialValue` : Required - The default/initial value of type `T` if the key is not found within the `LocalStorage` object.
+
+### Output
+
+An array containing the value, a function to set the value and another function to reset the value.
+
+- `[0]` : The value of the data stored in LocalStorage or the defaultValue if not set.
+- `[1]` : A function to set the value stored in LocalStorage. Signature is exactly like the standard [React.useState](https://reactjs.org/docs/hooks-state.html) hook.
+- `[2]` : A function to reset the data stored in the LocalStorage.
+
+[npm-image]: https://img.shields.io/npm/v/@phntms/use-local-state.svg?style=flat-square&logo=react
+[npm-url]: https://npmjs.org/package/@phntms/use-local-state
+[npm-downloads-image]: https://img.shields.io/npm/dm/@phntms/use-local-state.svg
+[npm-downloads-url]: https://npmcharts.com/compare/@phntms/use-local-state?minimal=true
+[ci-image]: https://github.com/phantomstudios/use-local-state/workflows/test/badge.svg
+[ci-url]: https://github.com/phantomstudios/use-local-state/actions