https://github.com/kof/react-nano-state

Fast state that can be shared across components outside of the React tree.
https://github.com/kof/react-nano-state

Last synced: about 2 months ago
JSON representation

Fast state that can be shared across components outside of the React tree.

• Host: GitHub
• URL: https://github.com/kof/react-nano-state
• Owner: kof
• License: mit
• Created: 2020-05-15T18:51:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-31T22:29:29.000Z (over 2 years ago)
• Last Synced: 2024-10-14T17:40:01.880Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://codesandbox.io/s/github/kof/react-nano-state/tree/master/examples/basic
• Size: 29.3 KB
• Stars: 71
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-state - react-nano-state
• awesome-react-state-management - react-nano-state - Fast state that can be shared across components outside of the React tree (List)

README

        
# Nano State - sharable state for React

Fast state that can be shared across components outside of the React tree.

Fast updates are achieved by letting React reconcile only specific components where you use the value.

Inspired by the idea from [Recoil](https://recoiljs.org/) - state subscriptions (atoms) minus all the rest. Just a state value one can share and have components hook into it without updating the entire subtree.

## Examples

```js

import { createValueContainer, useValue } from "react-nano-state";

// Value container can be exported and reused in any part of the tree.

const searchContainer = createValueContainer("Type the search");

const SearchInput = () => {

  // All we need to subscribe to those sharable value changes.

  const [search, setSearch] = useValue(searchContainer);

  const onChange = (event) => {

    setSearch(event.target.value);

  };

  return ;

};

```

[Basic example on codesandbox ](https://codesandbox.io/s/github/kof/react-nano-state/tree/master/examples/basic)

## API

### Value container

A value container is an object that can be shared across the code base and used to subscribe to the value.

```js

// nano-containers.js

import { createValueContainer } from "react-nano-state";

export const searchContainer = createValueContainer(initialValue);

```

### Hook into the value

It is very similar to React's `useState` with the difference that you access a shared state.

```js

import { useValue } from "react-nano-state";

import { searchContainer } from "./nano-containers";

const SearchInput = () => {

  const [search, setSearch] = useValue(searchContainer);

  const onChange = (event) => {

    setSearch(event.target.value);

  };

  return ;

};

```

### Update value outside of component

You can update the value outside of React components and components using it will receive the update.

```js

import { searchContainer } from "./nano-containers";

searchContainer.dispatch(newSearch);

```

### Subscribe value outside of component

You can subscribe to the value outside of React components.

```js

import { searchContainer } from "./nano-containers";

searchContainer.subscribe(console.log);

```