npmpackage.info

Gathering detailed insights and metrics for @zyda/swr-internal-state

@zyda/swr-internal-state - 1.2.0 | npmpackage.info

@zyda/swr-internal-state

Use SWR to manage app's internal state

1.2.0

MIT

TypeScript

5.59 kB

47,139 3.1

Installations

npm install @zyda/swr-internal-state

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.20.1

NPM Version

6.14.17 Pull Requests

Open

0

Total

6

Closed

1

Merged

5

Issues

Open

4

Total

6

Closed

2

Releases

Release 1.2.0

1.2.0

Updated on Oct 10, 2022

View All 1 releases

Languages

TypeScript

JavaScript

TypeScript (98.64%)

JavaScript (1.36%)

Developer

zydalabs

Download Statistics

Total Downloads

47,139

Last Day

Last Week

Last Month

244

Last Year

5,076

GitHub Statistics

MIT License

35 Stars

28 Commits

2 Forks

14 Watchers

1 Branches

14 Contributors

Updated on May 22, 2024

Bundle Size

20.55 kB

Minified

5.59 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 14 Contributors

Package Meta Information

Latest Version

1.2.0

Package Id

@zyda/swr-internal-state@1.2.0

Unpacked Size

23.17 kB

Size

6.92 kB

File Count

NPM Version

6.14.17

Node Version

14.20.1

Total Downloads

Cumulative downloads

Total Downloads

47,139

Last Day

66.7%

Compared to previous day

Last Week

14.3%

Compared to previous week

Last Month

-28.7%

244

Compared to previous month

Last Year

-63.9%

5,076

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

swr

Dev Dependencies

@types/jest jest ts-jest typescript

SWR Internal State

This package provides 2 hooks that can be used to manage react (or Next.js) project's internal state in ways: in memory state, and local storage persistent state.

This package is based on swr as they have built a very good caching method that can be generalized and used with different use cases other than fetching and caching data from an external service. Like managing internal app state and syncing that state between different components.

The 2 hooks that we expose are:

useGlobalState: used for managing and syncing in-memory state.
useLocalStorage: used for managing and syncing local storage persistent state.

When to Use

This package was made with the intention to be used to manage the internal states of projects that rely heavily on external services and has simple internal states. So -for small/simple states- it can be a convenient replacement for Redux, PullState, and even React's Context API.

Installation

With npm...

1npm i @zyda/swr-internal-state

Or with yarn...

1yarn add @zyda/swr-internal-state

How it works

The 2 used hooks accept similar parameters and have similar return types. Each of them accept a key and a default value. And both of them return an array of the state and its management functions (the exact interface of the hooks is explained below).

These 2 hooks are intended to be used as a building block for other custom hooks that are used to encapsulate the whole state. I.e. If you want to save a state that contains user info, you should create a custom hook useUserInfo that looks like the following...

1const useUserInfo= () => useGlobalState<UserInfo>('user-info', { name: '', age: null });
2
3// And in your components...
4const UserName = () => {
5  const [userInfo, setUserInfo] = useUserInfo();
6  return <span>{userInfo.name}</span>;
7}
8
9const UpdateUser = () => {
10  const [userInfo, setUserInfo] = useUserInfo();
11
12  const updateUser = () => {
13    const userName = /* some logic */;
14    const userAge = /* some logic */;
15    setUserInfo({ name: userName, age: userAge });
16  }
17
18  // Component logic...
19
20  return (
21    <div>
22      {/* Some UI */}
23      <button onClick={updateUser}>Update User</button>
24    </div>
25  );
26}
27

When you use setUserInfo it updates userInfo state in all the components that use it as if it was raised to their parent and shared from it (but that's not how SWR manage their state).

Hooks Interface

In-memory Hook

1useGlobalState<T>(key: string, defaultValue: T): [T, setValue: (T) => void]

This hook is used to manage and sync in-memory state between different components. The saved state is not persisted and will be reset with page refresh.

Parameters:

key (required): a unique key to the state that you want to manage. Used to differentiate states from each other (for example: to tell the difference between user-info and user-cart states)
defaultValue (optional, defaults to null): The initial value of that state.

Return values: The hook returns an array that contains 2 values:

The state: what ever you decide to save into that state. Initially it's value equals defaultValue.
setState function: A function that accepts 1 parameter: the new state.

Local Storage Persistent State

1useLocalStorage<T>(key: string, defaultValue: T): [T, setValue: (T) => void, removeValue: () => void]

This hook is used to manage and sync persisted state between different components. The saved state will be saved to the local storage and it will survive refreshing the page and closing the browser.

Parameters:

key (required): a unique key to the state that you want to manage. Used to differentiate states from each other (for example: to tell the difference between user-info and user-cart states)
defaultValue (optional, defaults to value stored in locale storage if exisits or null): The initial value of that state.

Return values:

The state: what ever you decide to save into that state. Initially it's value equals defaultValue.
setState function: A function that accepts 1 parameter: the new state.
removeValue function: A function that does not accept any value. Used to clear the local storage from the saved state and sets the state to defaultValue.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.1

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More