https://github.com/exuanbo/precoil

A minimal state management library for React.
https://github.com/exuanbo/precoil

hook hooks preact react react-hooks state state-management

Last synced: 6 days ago
JSON representation

A minimal state management library for React.

• Host: GitHub
• URL: https://github.com/exuanbo/precoil
• Owner: exuanbo
• License: mit
• Created: 2020-11-17T21:00:23.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-07-18T14:24:33.000Z (over 3 years ago)
• Last Synced: 2024-10-12T21:45:09.292Z (about 1 month ago)
• Topics: hook, hooks, preact, react, react-hooks, state, state-management
• Language: TypeScript
• Homepage:
• Size: 289 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Precoil

> A minimal state management library for React.

[![npm](https://img.shields.io/npm/v/precoil)](https://www.npmjs.com/package/precoil)

[![npm bundle size](https://img.shields.io/bundlephobia/min/precoil?label=bundle%20size)](https://bundlephobia.com/result?p=precoil)

[![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/exuanbo/precoil/Node.js%20CI/main)](https://github.com/exuanbo/precoil/actions?query=workflow%3A%22Node.js+CI%22)

[![Codecov branch](https://img.shields.io/codecov/c/gh/exuanbo/precoil/main?token=8GJEGUF449)](https://codecov.io/gh/exuanbo/precoil/)

[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)

## Features

- Minimalistic API based on hooks

- No context provider needed

- Small bundle size

Try it on [CodeSandbox](https://codesandbox.io/s/precoil-bsmdd).

## Install

```sh

npm install precoil

```

## Usage

### atom

```js

import { atom } from 'precoil'

const textState = atom()

// textState: Atom

const textStateWithDefault = atom('')

// textStateWithDefault: Atom

```

```ts

const textState = atom()

// textState: Atom

```

### Atom.useState

```js

const textState = atom()

const Input = () => {

  const [text, setText] = textState.useState()

  return (

     setText(e.currentTarget.value)}

    />

  )

}

const UpperCaseInput = () => {

  const [text] = textState.useState()

  return 
Uppercase: {text && text.toUpperCase() || ''}

}

```


### Atom.useReducer

```js

const countStore = atom({ count: 0 })

const Counter = () => {

  const [state, dispatch] = countStore.useReducer((prevState, action) => {

    switch (action.type) {

      case 'INCREMENT':

        return { count: prevState.count + 1 }

      case 'RESET':

        return { count: 0 }

      default:

        return prevState

    }

  })

  return (

    <>

      {state.count}

       dispatch({ type: 'INCREMENT' })}>inc

       dispatch({ type: 'RESET' })}>reset

    >

  )

}

const MirrorCounter = () => {

  const [state] = countStore.useState()

  return {state.count}

}

```

### Atom.subscribe

```js

const countStore = atom({ count: 0 })

const unsubscribe = countStore.subscribe(state => {

  console.log(`State has been changed to { count: ${state.count} }`)

})

// At some point

unsubscribe()

```

### Atom.destroy

```js

const countStore = atom({ count: 0 })

// Remove all listeners

countStore.destroy()

```

## License

[MIT License](https://github.com/exuanbo/precoil/blob/main/LICENSE) © 2021 [Exuanbo](https://github.com/exuanbo)