Socket
Socket
Sign inDemoInstall

foo-state

Package Overview
Dependencies
6
Maintainers
7
Versions
9
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.0 to 1.2.1

2

lib/cjs/createGlobalState.d.ts
import { GlobalState, GlobalStateOptions } from "./types";
export declare const createGlobalState: <TState>(initialState: TState | (() => TState), options?: GlobalStateOptions | undefined) => GlobalState<TState>;
export declare const createGlobalState: <TState>(initialState: TState | (() => TState), options?: GlobalStateOptions) => GlobalState<TState>;

4

lib/cjs/createGlobalState.js

@@ -7,3 +7,3 @@ "use strict";

exports.createGlobalState = void 0;
const Observable_1 = require("./Observable");
const rxjs_1 = require("rxjs");
const isBrowser_1 = require("./isBrowser");

@@ -17,3 +17,3 @@ const isEqual_1 = require("./isEqual");

const initialValue = (0, stateInputValueResolver_1.default)(undefined, initialState);
const state$ = new Observable_1.Observable(initialValue);
const state$ = new rxjs_1.BehaviorSubject(initialValue);
if (options?.persistence?.key && (0, isBrowser_1.isBrowser)()) {

@@ -20,0 +20,0 @@ (0, rehydrate_1.rehydrate)(state$, options?.persistence);

4

lib/cjs/createHook.d.ts
import { SetStateAction } from "react";
import { Observable } from "./Observable";
import { BehaviorSubject } from "rxjs";
import { SetStateOptions } from "./types";
export declare function createHook<TState>(state$: Observable<TState>, setGlobalState: (state: SetStateAction<TState>, options?: SetStateOptions) => void): () => readonly [TState, (state: SetStateAction<TState>, options?: SetStateOptions | undefined) => void];
export declare function createHook<TState>(state$: BehaviorSubject<TState>, setGlobalState: (state: SetStateAction<TState>, options?: SetStateOptions) => void): () => readonly [TState, (state: SetStateAction<TState>, options?: SetStateOptions) => void];

4

lib/cjs/createReadOnlyHook.d.ts

@@ -1,2 +0,2 @@

import { Observable } from "./Observable";
export declare function createReadOnlyHook<TState, TPartial>(state$: Observable<TState>, project: (state: TState) => TPartial): () => TPartial;
import { BehaviorSubject } from "rxjs";
export declare function createReadOnlyHook<TState, TPartial>(state$: BehaviorSubject<TState>, project: (state: TState) => TPartial): () => TPartial;

2

lib/cjs/createReadOnlyHook.js

@@ -16,3 +16,3 @@ "use strict";

return () => {
const initialValueCallback = generateProjectedValueCallback(state$.initializationValue);
const initialValueCallback = generateProjectedValueCallback(state$.value);
const [state, setState] = (0, react_1.useState)(initialValueCallback);

@@ -19,0 +19,0 @@ (0, react_1.useEffect)(() => {

4

lib/cjs/rehydrate.d.ts

@@ -0,3 +1,3 @@

import { BehaviorSubject } from "rxjs";
import { PersistenceOptions } from "./types";
import { Observable } from "./Observable";
export declare function rehydrate<TState>(state$: Observable<TState>, options: PersistenceOptions): void;
export declare function rehydrate<TState>(state$: BehaviorSubject<TState>, options: PersistenceOptions): void;

2

lib/cjs/stateInputValueResolver.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const isFunction = (value) => typeof value === 'function';
const isFunction = (value) => typeof value === "function";
const stateInputValueResolver = (currentValue, nextValue) => {

@@ -5,0 +5,0 @@ return isFunction(nextValue) ? nextValue(currentValue) : nextValue;

4

lib/cjs/StorageItem.js

@@ -35,3 +35,5 @@ "use strict";

const json = (0, safe_stable_stringify_1.default)(value);
this.storage.setItem(this.key, json);
if (json) {
this.storage.setItem(this.key, json);
}
}

@@ -38,0 +40,0 @@ catch (error) {

2

lib/esm/createGlobalState.d.ts
import { GlobalState, GlobalStateOptions } from "./types";
export declare const createGlobalState: <TState>(initialState: TState | (() => TState), options?: GlobalStateOptions | undefined) => GlobalState<TState>;
export declare const createGlobalState: <TState>(initialState: TState | (() => TState), options?: GlobalStateOptions) => GlobalState<TState>;

4

lib/esm/createGlobalState.js

@@ -1,2 +0,2 @@

import { Observable } from "./Observable";
import { BehaviorSubject } from "rxjs";
import { isBrowser } from "./isBrowser";

@@ -10,3 +10,3 @@ import { isEqual } from "./isEqual";

const initialValue = stateInputValueResolver(undefined, initialState);
const state$ = new Observable(initialValue);
const state$ = new BehaviorSubject(initialValue);
if (options?.persistence?.key && isBrowser()) {

@@ -13,0 +13,0 @@ rehydrate(state$, options?.persistence);

4

lib/esm/createHook.d.ts
import { SetStateAction } from "react";
import { Observable } from "./Observable";
import { BehaviorSubject } from "rxjs";
import { SetStateOptions } from "./types";
export declare function createHook<TState>(state$: Observable<TState>, setGlobalState: (state: SetStateAction<TState>, options?: SetStateOptions) => void): () => readonly [TState, (state: SetStateAction<TState>, options?: SetStateOptions | undefined) => void];
export declare function createHook<TState>(state$: BehaviorSubject<TState>, setGlobalState: (state: SetStateAction<TState>, options?: SetStateOptions) => void): () => readonly [TState, (state: SetStateAction<TState>, options?: SetStateOptions) => void];

4

lib/esm/createReadOnlyHook.d.ts

@@ -1,2 +0,2 @@

import { Observable } from "./Observable";
export declare function createReadOnlyHook<TState, TPartial>(state$: Observable<TState>, project: (state: TState) => TPartial): () => TPartial;
import { BehaviorSubject } from "rxjs";
export declare function createReadOnlyHook<TState, TPartial>(state$: BehaviorSubject<TState>, project: (state: TState) => TPartial): () => TPartial;

2

lib/esm/createReadOnlyHook.js

@@ -13,3 +13,3 @@ import { useEffect, useState } from "react";

return () => {
const initialValueCallback = generateProjectedValueCallback(state$.initializationValue);
const initialValueCallback = generateProjectedValueCallback(state$.value);
const [state, setState] = useState(initialValueCallback);

@@ -16,0 +16,0 @@ useEffect(() => {

4

lib/esm/rehydrate.d.ts

@@ -0,3 +1,3 @@

import { BehaviorSubject } from "rxjs";
import { PersistenceOptions } from "./types";
import { Observable } from "./Observable";
export declare function rehydrate<TState>(state$: Observable<TState>, options: PersistenceOptions): void;
export declare function rehydrate<TState>(state$: BehaviorSubject<TState>, options: PersistenceOptions): void;

2

lib/esm/stateInputValueResolver.js

@@ -1,2 +0,2 @@

const isFunction = (value) => typeof value === 'function';
const isFunction = (value) => typeof value === "function";
const stateInputValueResolver = (currentValue, nextValue) => {

@@ -3,0 +3,0 @@ return isFunction(nextValue) ? nextValue(currentValue) : nextValue;

4

lib/esm/StorageItem.js

@@ -29,3 +29,5 @@ /* eslint-disable no-console */

const json = stringify(value);
this.storage.setItem(this.key, json);
if (json) {
this.storage.setItem(this.key, json);
}
}

@@ -32,0 +34,0 @@ catch (error) {

15

package.json
{
"name": "foo-state",
"version": "1.2.0",
"version": "1.2.1",
"description": "A simple yet powerful library for managing global states with react",

@@ -46,2 +46,3 @@ "main": "./lib/cjs/index.js",

"dependencies": {
"rxjs": "^7.5.7",
"safe-stable-stringify": "^2.3.1"

@@ -63,15 +64,15 @@ },

"@testing-library/react": "^13.0.0",
"@types/jest": "^27.4.0",
"@types/jest": "^29.2.0",
"@types/react": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.11.0",
"@typescript-eslint/parser": "^5.11.0",
"babel-jest": "^28.0.2",
"babel-jest": "^29.0.0",
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.1.0",
"eslint-import-resolver-typescript": "^2.5.0",
"eslint-import-resolver-typescript": "^3.1.2",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"jest": "^28.0.2",
"jest-environment-jsdom": "^28.0.2",
"jest": "^29.2.2",
"jest-environment-jsdom": "^29.0.0",
"jest-localstorage-mock": "^2.4.18",

@@ -83,3 +84,3 @@ "prettier": "^2.2.1",

"semantic-release": "^19.0.2",
"typedoc": "^0.22.11",
"typedoc": "^0.23.2",
"typedoc-plugin-markdown": "^3.11.13",

@@ -86,0 +87,0 @@ "typescript": "^4.5.5"

486

README.md
[![build](https://github.com/foobaragency/react-global-state/actions/workflows/build.yml/badge.svg)](https://github.com/foobaragency/react-global-state/actions/workflows/build.yml)
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
![Total coverage](./badges/coverage-jest%20coverage.svg)

@@ -9,2 +12,17 @@ # foo-state

## Table of contents
1. [Installation](#⚙️-installation)
2. [Examples](#🔌-examples)
1. [Using as a hook](#1---using-as-a-hook)
2. [Using outside React](#2---using-outside-react)
3. [Partial state hook](#3---partial-state-hook)
4. [Persist state](#4---persist-state)
5. [Using deep comparison](#5---using-deep-comparison-useful-for-objects-and-arrays-to-prevent-unnecessary-re-renders)
6. [With lazy initialization](#6---with-lazy-initialization)
7. [Using with TypeScript](#7---with-typescript)
3. [API Reference](#api-reference)
4. [Contributing](#👥-contributing)
5. [License](#🏛-license)
## ⚙️ Installation

@@ -16,231 +34,330 @@

## 🔌 Usage
## 🔌 Examples
### Example 1 - using as a hook
```jsx
import { createGlobalState } from "foo-state"
### 1 - using as a hook
<details>
<summary>See code</summary>
const initialState = 0
```jsx
import { createGlobalState } from "foo-state"
const { useGlobalState } = createGlobalState(initialState)
const initialState = 0
const Counter = () => {
const [count, setCount] = useGlobalState()
const { useGlobalState } = createGlobalState(initialState)
const increment = () => {
setCount(count + 1)
const Counter = () => {
const [count, setCount] = useGlobalState()
const increment = () => {
setCount(count + 1)
}
const decrement = () => {
// you can also use callback functions
setCount((state) => {
if (state > 0) {
return state - 1
}
return state
})
}
return (
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
)
}
```
</details>
const decrement = () => {
// you can also use callback functions
setCount((state) => {
if (state > 0) {
return state - 1
}
### 2 - using outside react
return state
})
<details>
<summary>See code</summary>
```jsx
import { createGlobalState } from "foo-state"
const initialState = 0
const { useGlobalState, setGlobalState } = createGlobalState(initialState)
function setInitialState() {
setTimeout(() => {
setGlobalState(10_000)
}, 2_000)
}
return (
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
)
}
```
const Counter = () => {
const [count, setCount] = useGlobalState()
### Example 2 - using outside react
useEffect(() => {
setInitialState()
}, [])
```jsx
import { createGlobalState } from "foo-state"
const decrement = () => {
setCount(count - 1)
}
const initialState = 0
const increment = () => {
setCount(count + 1)
}
const { useGlobalState, setGlobalState } = createGlobalState(initialState)
return (
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
)
}
```
</details>
function setInitialState() {
setTimeout(() => {
setGlobalState(10_000)
}, 2_000)
}
### 3 - partial state hook
const Counter = () => {
const [count, setCount] = useGlobalState()
<details>
<summary>See code</summary>
useEffect(() => {
setInitialState()
}, [])
```jsx
import { createGlobalState } from "foo-state"
const decrement = () => {
setCount(count - 1)
const initialState = {
firstName: "John",
lastName: "Doe",
age: 43
}
const increment = () => {
setCount(count + 1)
const { createPartialState } = createGlobalState(initialState)
const useAge = createPartialState(state => state.age)
const Age = () => {
const age = useAge()
return (
<div>{age}</div>
)
}
```
</details>
return (
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
)
}
```
### 4 - persist state
### Example 3 - Partial state hook
```jsx
import { createGlobalState } from "foo-state"
<details>
<summary>See code</summary>
const initialState = {
```jsx
import { createGlobalState } from "foo-state"
const initialState = {
firstName: "John",
lastName: "Doe",
age: 43
}
const { useGlobalState } = createGlobalState(initialState, {
persistence: {
key: "x-storage-key",
// optional, defaults to localStorage
// localStorage or sessionStorage
type: "localStorage",
}
})
const Person = () => {
const [person, setPerson] = useGlobalState()
function onChange(e){
const {name, value} = e.target
setPerson({
...person,
[name]: value
})
}
return (
<div>
<label>
First Name
<br />
<input name="firstName" value={person.firstName} onChange={onChange} />
</label>
<label>
Last Name
<br />
<input name="lastName" value={person.lastName} onChange={onChange} />
</label>
<label>
Age
<br />
<input name="age" value={person.age} onChange={onChange} />
</label>
</div>
)
}
```
</details>
### 5 - using deep comparison (useful for objects and arrays to prevent unnecessary re-renders)
<details>
<summary>See code</summary>
```jsx
import { createGlobalState } from "foo-state"
const initialState = {
firstName: "John",
lastName: "Doe",
age: 43
}
age: 43,
}
const { createPartialState } = createGlobalState(initialState)
const { useGlobalState } = createGlobalState(initialState)
const useAge = createPartialState(state => state.age)
const Profile = () => {
const [state, setState] = useGlobalState()
const Age = () => {
const age = useAge()
function invertNames() {
const newState = {
firstName: "Doe",
lastName: "John",
age: 43,
}
setState(newState, { deepCompare: true })
}
return (
<div>{age}</div>
<div>
<p>First Name: {state.firstName}</p>
<p>Last Name: {state.lastName}</p>
<p>Age: {state.age}</p>
<button onClick={invertNames}>Click me!</button>
</div>
)
}
```
}
```
</details>
### Example 4 - Persist state
```jsx
import { createGlobalState } from "foo-state"
### 6 - With lazy initialization
const initialState = {
firstName: "John",
lastName: "Doe",
age: 43
}
<details>
<summary>See code</summary>
const { useGlobalState } = createGlobalState(initialState, {
persistence: {
key: "x-storage-key",
// optional, defaults to localStorage
// localStorage or sessionStorage
type: "localStorage",
```jsx
function heavyCalculation() {
const user = {
name: 'John',
birthday: new Date('1995-03-15')
}
// let's pretend we're getting a correct age here
const age = new Date().getFullYear() - user.birthday.getFullYear()
return {
name: user.name,
age,
}
}
})
const Person = () => {
const [person, setPerson] = useGlobalState()
function onChange(e){
const {name, value} = e.target
const {useGlobalState} = createGlobalState(heavyCalculation)
setPerson({
...person,
[name]: value
})
}
const Profile = () => {
const [state] = useGlobalState()
return (
<div>
<label>
First Name
<br />
<input name="firstName" value={person.firstName} onChange={onChange} />
</label>
<label>
Last Name
<br />
<input name="lastName" value={person.lastName} onChange={onChange} />
</label>
<label>
Age
<br />
<input name="age" value={person.age} onChange={onChange} />
</label>
</div>
<div>
<p>Name: {state.name}</p>
<p>Age: {state.age}</p>
</div>
)
}
```
}
```
</details>
## Example 5 - Using deep comparison (useful for objects and arrays to prevent unnecessary re-renders)
```jsx
import { createGlobalState } from "foo-state"
### 7 - With typescript
const initialState = {
firstName: "John",
lastName: "Doe",
age: 43,
}
<details>
<summary>See code</summary>
const { useGlobalState } = createGlobalState(initialState)
```tsx
import { createGlobalState } from "foo-state"
const Profile = () => {
const [state, setState] = useGlobalState()
type Person = {
firstName: string
lastName: string
age: number
}
function invertNames() {
const newState = {
firstName: "Doe",
lastName: "John",
age: 43,
}
setState(newState, { deepCompare: true })
const { useGlobalState } = createGlobalState<Person>({
firstName: "John",
lastName: "Doe",
// string is not assignable to type number
age: "43"
})
const Profile = () => {
const [state, setState] = useGlobalState()
function invertNames() {
const newState = {
firstName: "Doe",
lastName: "John",
age: 43,
}
setState(newState, {deepCompare: true})
}
return (
<div>
<p>First Name: {state.firstName}</p>
<p>Last Name: {state.lastName}</p>
<p>Age: {state.age}</p>
<button onClick={invertNames}>Click me!</button>
</div>
)
}
```
</details>
return (
<div>
<p>First Name: {state.firstName}</p>
<p>Last Name: {state.lastName}</p>
<p>Age: {state.age}</p>
<button onClick={invertNames}>Click me!</button>
</div>
)
}
```
## API Reference
## Example 6 - With typescript
```tsx
import { createGlobalState } from "foo-state"
### createGlobalState
type Person = {
firstName: string
lastName: string
age: number
}
```ts
createGlobalState<S>(initialState: S | () => S, options: GlobalStateOptions): GlobalState
```
const { useGlobalState } = createGlobalState<Person>({
firstName: "John",
lastName: "Doe",
// string is not assignable to type number
age: "43"
})
This is, most probably, the only function you will need to use from this library.
#### Params
The initial state can be either a `value` or a `function` that resolves to a value. This mirrors the [`useState` API](https://reactjs.org/docs/hooks-reference.html#usestate).
const Profile = () => {
const [state, setState] = useGlobalState()
The library tries to infer the type as much as possible, but you can also specify the type:
function invertNames() {
const newState = {
firstName: "Doe",
lastName: "John",
age: 43,
}
setState(newState, {deepCompare: true})
}
```ts
type Person = {}
return (
<div>
<p>First Name: {state.firstName}</p>
<p>Last Name: {state.lastName}</p>
<p>Age: {state.age}</p>
<button onClick={invertNames}>Click me!</button>
</div>
)
}
const state = createGlobalState<Person>({})
```
You can always [read more about the `options` parameter for `createGlobalState`](./docs/interfaces/GlobalStateOptions.md).
#### Returned functions
+ `useGlobalState` - This react hook can be used inside any functional component to access or change the state.
+ `useReadOnlyState` - This react hook doesn't give you access to the `setState` function, instead it only returns the current state.
+ `createPartialState` - This function will return a read only react hook with a custom partial state. [See example of `createPartialState`](#3---partial-state-hook)
+ `getGlobalState` - This function returns the current state and can be used anywhere in you application, not only inside react components.[See example of `getGlobalState`](#2---using-outside-react)
+ `setGlobalState` - This function allows you to change the state and can be used anywhere in you application, not only inside react components.[See example of `setGlobalState`](#2---using-outside-react)
## 👥 Contributing

@@ -255,1 +372,26 @@

[MIT](https://choosealicense.com/licenses/mit/)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="https://github.com/n4bb12"><img src="https://avatars.githubusercontent.com/u/6810177?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Abraham Schilling</b></sub></a><br /><a href="#design-n4bb12" title="Design">🎨</a> <a href="#mentoring-n4bb12" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/foobaragency/foo-state/commits?author=n4bb12" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/kaiserbock"><img src="https://avatars.githubusercontent.com/u/730195?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Bock</b></sub></a><br /><a href="#design-kaiserbock" title="Design">🎨</a> <a href="https://github.com/foobaragency/foo-state/commits?author=kaiserbock" title="Code">💻</a></td>
<td align="center"><a href="https://leniac.dev"><img src="https://avatars.githubusercontent.com/u/7433159?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lenilson "Lenny" Nascimento</b></sub></a><br /><a href="https://github.com/foobaragency/foo-state/commits?author=l-Leniac-l" title="Code">💻</a> <a href="https://github.com/foobaragency/foo-state/commits?author=l-Leniac-l" title="Documentation">📖</a> <a href="#maintenance-l-Leniac-l" title="Maintenance">🚧</a></td>
<td align="center"><a href="https://github.com/afennert"><img src="https://avatars.githubusercontent.com/u/33861227?v=4?s=100" width="100px;" alt=""/><br /><sub><b>afennert</b></sub></a><br /><a href="https://github.com/foobaragency/foo-state/commits?author=afennert" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/Segebre"><img src="https://avatars.githubusercontent.com/u/10774915?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Juan Enrique Segebre Zaghmout</b></sub></a><br /><a href="https://github.com/foobaragency/foo-state/commits?author=segebre" title="Code">💻</a> <a href="#maintenance-segebre" title="Maintenance">🚧</a> <a href="https://github.com/foobaragency/foo-state/commits?author=segebre" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/seanowenhayes"><img src="https://avatars.githubusercontent.com/u/3706358?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean Hayes</b></sub></a><br /><a href="https://github.com/foobaragency/foo-state/commits?author=seanowenhayes" title="Documentation">📖</a> <a href="https://github.com/foobaragency/foo-state/commits?author=seanowenhayes" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/seblondono"><img src="https://avatars.githubusercontent.com/u/20850740?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sebastian Londono</b></sub></a><br /><a href="https://github.com/foobaragency/foo-state/pulls?q=is%3Apr+reviewed-by%3Aseblondono" title="Reviewed Pull Requests">👀</a> <a href="#ideas-seblondono" title="Ideas, Planning, & Feedback">🤔</a></td>
</tr>
</table>
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

4

src/createGlobalState.ts

@@ -0,4 +1,4 @@

import { BehaviorSubject } from "rxjs"
import { SetStateAction } from "react"
import { Observable } from "./Observable"
import { isBrowser } from "./isBrowser"

@@ -17,3 +17,3 @@ import { isEqual } from "./isEqual"

const initialValue = stateInputValueResolver(undefined, initialState)
const state$ = new Observable<TState>(initialValue)
const state$ = new BehaviorSubject<TState>(initialValue)

@@ -20,0 +20,0 @@ if (options?.persistence?.key && isBrowser()) {

6

src/createHook.ts
import { SetStateAction } from "react"
import { BehaviorSubject } from "rxjs"
import { Observable } from "./Observable"
import { createReadOnlyHook } from "./createReadOnlyHook"

@@ -8,3 +8,3 @@ import { SetStateOptions } from "./types"

export function createHook<TState>(
state$: Observable<TState>,
state$: BehaviorSubject<TState>,
setGlobalState: (

@@ -15,3 +15,3 @@ state: SetStateAction<TState>,

) {
const useReadOnlyState = createReadOnlyHook(state$, state => state);
const useReadOnlyState = createReadOnlyHook(state$, state => state)

@@ -18,0 +18,0 @@ return () => {

12

src/createReadOnlyHook.ts
import { useEffect, useState } from "react"
import { BehaviorSubject } from "rxjs"
import { Observable } from "./Observable"
export function createReadOnlyHook<TState, TPartial>(
state$: Observable<TState>,
state$: BehaviorSubject<TState>,
project: (state: TState) => TPartial
) {
/**

@@ -22,3 +20,3 @@ * If the value passed by the user is a function, we are already resolving it previously.

return () => {
const initialValueCallback = generateProjectedValueCallback(state$.initializationValue)
const initialValueCallback = generateProjectedValueCallback(state$.value)
const [state, setState] = useState(initialValueCallback)

@@ -32,3 +30,5 @@

*/
const stateValueAfterMountCallback = generateProjectedValueCallback(state$.value)
const stateValueAfterMountCallback = generateProjectedValueCallback(
state$.value
)
setState(stateValueAfterMountCallback)

@@ -35,0 +35,0 @@

5

src/rehydrate.ts

@@ -0,8 +1,9 @@

import { BehaviorSubject } from "rxjs"
import { StorageItem } from "./StorageItem"
import { isEqual } from "./isEqual"
import { PersistenceOptions } from "./types"
import { Observable } from "./Observable"
export function rehydrate<TState>(
state$: Observable<TState>,
state$: BehaviorSubject<TState>,
options: PersistenceOptions

@@ -9,0 +10,0 @@ ) {

5

src/stateInputValueResolver.ts

@@ -1,2 +0,3 @@

const isFunction = (value: unknown): value is Function => typeof value === 'function'
const isFunction = (value: unknown): value is Function =>
typeof value === "function"

@@ -10,2 +11,2 @@ const stateInputValueResolver = <TState, TValue = TState>(

export default stateInputValueResolver
export default stateInputValueResolver

4

src/StorageItem.ts

@@ -33,3 +33,5 @@ /* eslint-disable no-console */

const json = stringify(value)
this.storage.setItem(this.key, json)
if (json) {
this.storage.setItem(this.key, json)
}
} catch (error) {

@@ -36,0 +38,0 @@ console.error(error)

lib/cjs/Observable.d.ts
lib/cjs/Observable.js
lib/cjs/Observable.js.map
lib/esm/Observable.d.ts
lib/esm/Observable.js
lib/esm/Observable.js.map
src/Observable.ts
lib/cjs/createGlobalState.js.map

Sorry, the diff of this file is not supported yet

lib/cjs/createHook.js.map

Sorry, the diff of this file is not supported yet

lib/cjs/createReadOnlyHook.js.map

Sorry, the diff of this file is not supported yet

lib/cjs/rehydrate.js.map

Sorry, the diff of this file is not supported yet

lib/cjs/stateInputValueResolver.js.map

Sorry, the diff of this file is not supported yet

lib/cjs/StorageItem.js.map

Sorry, the diff of this file is not supported yet

lib/esm/createGlobalState.js.map

Sorry, the diff of this file is not supported yet

lib/esm/createHook.js.map

Sorry, the diff of this file is not supported yet

lib/esm/createReadOnlyHook.js.map

Sorry, the diff of this file is not supported yet

lib/esm/rehydrate.js.map

Sorry, the diff of this file is not supported yet

lib/esm/stateInputValueResolver.js.map

Sorry, the diff of this file is not supported yet

lib/esm/StorageItem.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc