npmpackage.info

Gathering detailed insights and metrics for recoil-localstorage-effect

recoil-localstorage-effect

A Recoil effect to persist state to localStorage with Static Site Generation.

1.0.3

MIT

TypeScript

5.02 kB

255

Installations

npm install recoil-localstorage-effect

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.16.0

NPM Version

10.8.2 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

JavaScript

TypeScript (67.35%)

JavaScript (32.65%)

Developer

eguchi1611

Download Statistics

Total Downloads

255

Last Day

Last Week

Last Month

Last Year

255

GitHub Statistics

13 Commits

1 Watching

1 Branches

1 Contributors

Maintainers

Package Meta Information

Latest Version

1.0.3

Package Id

recoil-localstorage-effect@1.0.3

Unpacked Size

5.02 kB

Size

2.51 kB

File Count

NPM Version

10.8.2

Node Version

20.16.0

Publised On

27 Aug 2024

Total Downloads

Cumulative downloads

Total Downloads

255

Last day

Compared to previous day

Last week

Compared to previous week

Last month

60%

Compared to previous month

Last year

255

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-dom recoil

Dev Dependencies

@eslint/js @types/node @types/react @types/react-dom @vitejs/plugin-react eslint eslint-plugin-react-hooks eslint-plugin-react-refresh globals rollup-plugin-preserve-directives typescript typescript-eslint vite

Versions

recoil-localstorage-effect

Introduction

This is a library that uses Recoil to persist state in LocalStorage.

There is an example of Local Storage Persistence in Recoil’s Docs. However, in SSG environments like Next.js, a Hydration Error may occur. This library can help avoid that. It returns a default value until the component is mounted.

Installation

1npm install recoil-localstorage-effect

1yarn add recoil-localstorage-effect

1pnpm add recoil-localstorage-effect

Usage

1// layout.tsx
2import {
3  LocalStorageEffectProvider,
4  localStorageEffect,
5} from "recoil-localstorage-effect";
6
7export default function RootLayout({ children }) {
8  return (
9    <html>
10      <body>
11        <LocalStorageEffectProvider>
12          <RecoilRoot>{children}</RecoilRoot>
13        </LocalStorageEffectProvider>
14      </body>
15    </html>
16  );
17}
18
19// atom.ts
20export const sampleState = {
21  key: "sampleState",
22  default: "default value",
23  effects: [localStorageEffect("localstorage_key")],
24};
25
26// Component.tsx
27export default function Component() {
28  const [state, setState] = useRecoilState(sampleState);
29
30  const handleChange = (e) => {
31    setState(e.target.value);
32  };
33
34  return <input type="text" value={state} onChange={handleChange} />;
35}

License

recoil-localstorage-effect is licensed under the MIT License

No vulnerabilities found.

No security vulnerabilities found.