https://github.com/ibeizhu/react-secure-state

React Secure State
https://github.com/ibeizhu/react-secure-state

access-control privilege react react-secure-state react-state safe secure state store

Last synced: 6 months ago
JSON representation

React Secure State

• Host: GitHub
• URL: https://github.com/ibeizhu/react-secure-state
• Owner: ibeizhu
• License: mit
• Created: 2025-07-14T03:18:46.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-07-21T01:53:15.000Z (7 months ago)
• Last Synced: 2025-07-23T07:50:49.793Z (7 months ago)
• Topics: access-control, privilege, react, react-secure-state, react-state, safe, secure, state, store
• Language: TypeScript
• Homepage: https://ibeizhu.github.io/react-secure-state/
• Size: 3.92 MB
• Stars: 83
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-secure-state

[![NPM version](https://img.shields.io/npm/v/react-secure-state.svg?style=flat)](https://npmjs.org/package/react-secure-state)

[![NPM downloads](http://img.shields.io/npm/dm/react-secure-state.svg?style=flat)](https://npmjs.org/package/react-secure-state)

A secure and reliable state management tool with fine-grained permission control and ultimate rendering performance.

Features:

- 💎 Store: State Management Framework

- 🛡️ Secure: Field-level Access Control

- 🚀 Extreme Performance: Support point-to-point rendering for store data updates

- 📝 Typed: Powerful Type Inference

- 🚀 Lightweight: Zero Dependencies

[中文文档](https://ibeizhu.github.io/react-secure-state)

[English Document](https://ibeizhu.github.io/react-secure-state/en-US)

## Installation

```

npm i react-secure-state -S

```

## Usage

`react-secure-state` is designed to strictly control store data read and write permissions. Developers can explicitly declare and request read or write access to specific fields. If a field is not included in the declared permissions, modifications will not be permitted.

### createStore

`./store.tsx`

```tsx | pure

import { createStore } from 'react-secure-state';

export interface StoreType {

  name: string;

  height: number;

}

const { StoreProvider, useStoreValues } = createStore();

export { StoreProvider, useStoreValues };

```

### initialize store

`./App.tsx`

```tsx | pure

import { StoreProvider } from './store';

import { Child1, Child2 } from './Child';

function App() {

  const data = {

    name: 'Bob',

    height: 180,

  };

  return (

    

      

      

    

  );

}

```

### use store value

`./Child.tsx`

```tsx | pure

import { useStoreValues } from './store';

export function Child1() {

  // apply field `name` read & write permission

  // note: `setFieldValue` can only update field `name`, has no permission to update other fields

  const [values, { setFieldValue }] = useStoreValues(['name']);

  console.log(data);

  // data = { name }

  const handleClick = () => {

    // has no permission to update other fields

    setFieldValue('name', 'James');

  };

  return (

    


      {data.name}

      update name

    

  );

}


export function Child2() {

  // apply field `height` read & write permission

  // note: `setFieldValue` can only update field `height`, has no permission to update other fields

  const [values, { setFieldValue }] = useStoreValues(['height']);

  console.log(data);

  // data = { height }

  const handleClick = () => {

    // has no permission to update other fields

    setFieldValue('height', 110);

  };

  return (

    


      {data.height}

      update height

    

  );

}

```


## LICENSE

MIT