npmpackage.info

Gathering detailed insights and metrics for recoil-localstorage-effect

recoil-localstorage-effect - 1.0.3 | npmpackage.info

recoil-localstorage-effect

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

1.0.3

MIT

TypeScript

5.02 kB

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

Languages

TypeScript

JavaScript

TypeScript (67.35%)

JavaScript (32.65%)

Developer

eguchi1611

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

13 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Aug 27, 2024

Maintainers

View All 1 Contributors

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

Published on

Aug 27, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

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

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.