-
Notifications
You must be signed in to change notification settings - Fork 584
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(hook): Enter useMutableState * feat(hook): adds useMutableState tests
- Loading branch information
Showing
13 changed files
with
147 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # useMutableState | ||
|
|
||
| This hook provides mutable states that trigger the component to re-render. It offers similar functionality to Svelte's reactivity, enabling | ||
| developers to write more efficient and concise code. | ||
|
|
||
| ### Why? 💡 | ||
|
|
||
| - Improves code streamlining by providing a reactive state that can be used to trigger a rerender | ||
|
|
||
| ### Basic Usage: | ||
|
|
||
| ```jsx harmony | ||
| import { Typography, Space, Button, Tag } from 'antd'; | ||
| import useMutableState from 'beautiful-react-hooks/useMutableState'; | ||
|
|
||
| const TestComponent = () => { | ||
| const counter = useMutableState({ value: 0 }); | ||
|
|
||
| return ( | ||
| <DisplayDemo title="useMutableState"> | ||
| <Typography.Paragraph> | ||
| Counter: <Tag color="green">{counter.value}</Tag> | ||
| </Typography.Paragraph> | ||
| <Space> | ||
| <Button type="primary" onClick={() => counter.value += 1}>increase</Button> | ||
| <Button type="primary" onClick={() => counter.value -= 1}>decrease</Button> | ||
| </Space> | ||
| </DisplayDemo> | ||
| ); | ||
| }; | ||
|
|
||
| <TestComponent /> | ||
| ``` | ||
|
|
||
| <!-- Types --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -335,4 +335,4 @@ | |
| "require": "./useAudio.js" | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { useMemo, useState } from 'react' | ||
|
|
||
| /** | ||
| * Returns a reactive value that can be used as a state. | ||
| */ | ||
| const useMutableState = <TValue, TProxied extends Record<string | symbol, TValue>>(initialState: TProxied) => { | ||
| if (typeof initialState !== 'object' || initialState === null) throw new Error('The initial state must be an object') | ||
|
|
||
| const [, setState] = useState(0) | ||
|
|
||
| return useMemo<TProxied>(() => new Proxy(initialState, { | ||
| set: (target, prop: keyof TProxied, value: TProxied[keyof TProxied]) => { | ||
| if (target && target[prop] !== value) { | ||
| target[prop] = value | ||
| setState((state) => (state + 1)) | ||
| } | ||
| return true | ||
| } | ||
| }), []) | ||
| } | ||
|
|
||
| export default useMutableState |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React, { useEffect } from 'react' | ||
| import { render } from '@testing-library/react' | ||
| import { cleanup, renderHook } from '@testing-library/react-hooks' | ||
| import useMutableState from '../dist/useMutableState' | ||
| import assertHook from './utils/assertHook' | ||
|
|
||
| describe('useMutableState', () => { | ||
| beforeEach(cleanup) | ||
|
|
||
| assertHook(useMutableState) | ||
|
|
||
| it('should return an object', () => { | ||
| const { result } = renderHook(() => useMutableState({ value: 0 })) | ||
|
|
||
| expect(result.current).to.be.an('object').that.has.property('value') | ||
| }) | ||
|
|
||
| it('should re-render when the value changes', () => { | ||
| const spy = sinon.spy() | ||
|
|
||
| const TestComponent = () => { | ||
| const state = useMutableState({ value: 0 }) | ||
|
|
||
| spy() | ||
|
|
||
| useEffect(() => { | ||
| state.value = 1 | ||
| }, []) | ||
|
|
||
| return <div>val: {state.value}</div> | ||
| } | ||
|
|
||
| render(<TestComponent />) | ||
|
|
||
| expect(spy.callCount).to.equal(2) | ||
| }) | ||
| }) |