Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
chungheon_yi committed Nov 19, 2024
1 parent 577e372 commit 8a7ae56
Showing 1 changed file with 36 additions and 9 deletions.
45 changes: 36 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,23 @@ useContext() always looks for the closest provider above the component that call

<https://react.dev/reference/react/useContext#passing-data-deeply-into-the-tree>

During development, I encountered situations where:

1. Tabs nested within tabs needed to manipulate the state of the top-level tab.
2. Tables nested within tables required control over the outermost table.

3. While building a design system, I wanted to address the issue of re-renders caused by state changes when using the Context API. However, other libraries felt too cumbersome to use.

Inspired by Radix UI's concept of scopes ([Radix Context](https://github.com/radix-ui/primitives/tree/main/packages/react/context)), I aimed to create a global state library that:

- Provides a more flexible and scalable approach to state management.
- Reduces unnecessary re-renders.
- Simplifies implementation for deeply nested components.

These use cases caused significant challenges and motivated me to create this library.

### Main purpose

The main purpose of this library is not so much for global state management (although it can be used that way too!) but rather for managing state in a flexible, simple, and efficient manner when developing component-based applications, much like its name 'namespace' suggests.

It is recommended for use in the following cases:

- Developing design system components (I use it with radix-ui)
- Large and complex components such as features, widgets, and pages in the FSD architecture, or organisms in the atomic design pattern
- Recursive structures like nested tabs, especially when there is a need to manipulate them mutually
- When external components need to manipulate the state within a context

## Installation

Expand Down Expand Up @@ -373,7 +376,6 @@ export const ScopeExample = () => {

return (
<>
{/*"Does this seem crazy? The requirements at my workplace are quite similar to this!"*/}
<AlertDialogProvider scope={scope.__scopeAlertDialog}>
<AlertDialogProvider scope={scope2.__scopeAlertDialog}>
<DialogProvider scope={scope2.__scopeAlertDialog}>
Expand Down Expand Up @@ -476,6 +478,31 @@ const {
</ComposedProvider>;
```

### reset State

you can reset states with reset function in useNamespaceAction or useNamespaceStores

```jsx
const TestComponent = () => {
const { count } = useNamespaceStores((state) => ({ count: state.count }))
const { increment, decrement, reset } = useNamespaceAction()

return (
<div>
<button type="button" data-testid="reset-button" onClick={reset}>
Reset
</button>
<button type="button" data-testid="increment-button" onClick={increment}>
Increment
</button>
<button type="button" data-testid="decrement-button" onClick={decrement}>
Decrement
</button>
</div>
)
}
```

## License

MIT License
Expand Down

0 comments on commit 8a7ae56

Please sign in to comment.