Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daniel-dx/nice-hooks
πΉ A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)
https://github.com/daniel-dx/nice-hooks
Last synced: about 1 month ago
JSON representation
πΉ A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)
- Host: GitHub
- URL: https://github.com/daniel-dx/nice-hooks
- Owner: daniel-dx
- License: mit
- Created: 2019-09-23T03:22:35.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-28T13:36:28.000Z (over 1 year ago)
- Last Synced: 2024-10-09T21:08:57.128Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 497 KB
- Stars: 48
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `nice-hooks`
- awesome-react-hooks-cn - `nice-hooks`
- awesome-react-hooks - `nice-hooks`
- awesome-react-hooks - `nice-hooks`
README
# πΉNice Hooks
[δΈζη](README_CN.md)
A lot of nice hooks to make react hooks easier to use.
> If you find this project is useful to you, please give me a star.
## Installation
`npm install nice-hooks`
## Hooks
- [useStateCB](#useStateCB)
Lets you safely use the state of the react , whose value is the value you want, not the stale value. And also has the ability to callback.
- [useSingleState (recommended)](#useSingleState)
Use `state` with a way like `this.state` and `this.setState` in the form of `class`. It is also safe to use state and have callback capabilities
- [useLifeCycle](#useLifeCycle)
Support lifecycle declarations to make code organization more readable, rather than using a bunch of useEffect.
- [useInstanceVar](#useInstanceVar)
Support for instance variables. That is, after each re-render, the latest value of the variable can be obtained.
- [useSingleInstanceVar (recommended)](#useSingleInstanceVar)
(Recommended) Declare all instance variables together and use them closer to the instance variables
## Usage
### useStateCB
Lets you safely use the state of the react , whose value is the value you want, not the stale value. And also has the ability to callback.
```
# Example
import React from 'react';
import { useStateCB } from 'nice-hooks';
export const UseStateCBDemoComp = () => {
const [getCount, setCount] = useStateCB(0);
function doSomeActions() {
console.log('Current count:', getCount());
}
return (
{getCount()}
setCount(getCount() + 1, doSomeActions)}>
Increase
);
};
```
### useSingleState
(Recommended) Use `state` with a way like `this.state` and `this.setState` in the form of `class`. It is also safe to use state and have callback capabilities
```
# Example
import React from "react";
import { useSingleState } from "nice-hooks";
export const UseSingleStateDemoComp = () => {
const [state, setState] = useSingleState({
count: 0,
time: +new Date()
});
function doSomeActions() {
console.log("Current count:", state.count);
}
return (
useSingleState
{state.count} {state.time}
setState(
{
count: state.count + 1
},
doSomeActions
)
}
>
Increase
setState({
time: +new Date()
})
}
>
Chnange Time
);
};
```
### useLifeCycle
Support lifecycle declarations to make code organization more readable, rather than using a bunch of useEffect.
```
# Example
import React from 'react';
import { useLifeCycle } from 'nice-hooks';
const App = () => {
useLifeCycle({
didMount() {
// Do something after mounted
},
willUnmount() {
// Do something when the component will be unmount
},
didUpdate() {
// Do something after re-rendered.
},
didMountAndWillUnmount: [
{
didMount() {
// Example: setTimeout
},
willUnmount() {
// Example: clearTimeout
}
},
{
didMount() {
// Example: on resize event
// ...
},
willUnmount() {
// Example: off resize event
// ...
}
}
]
})
return (
);
};
```
### useInstanceVar
Support for instance variables. That is, after each re-render, the latest value of the variable can be obtained.
```
# Example
import React from "react";
import { useInstanceVar, useSingleState } from "nice-hooks";
export const UseInstanceVarDemoComp = () => {
const [getIntervalVal, setIntervalVal] = useInstanceVar(null);
const [state, setState] = useSingleState({ count: 0 });
function start() {
const interval = setInterval(
() => setState({ count: state.count + 1 }),
1000
);
setIntervalVal(interval);
}
function stop() {
const interval = getIntervalVal();
interval && clearInterval(interval);
}
return (
{state.count}
Start
Stop
);
};
```
### useSingleInstanceVar
(Recommended) Declare all instance variables together and use them closer to the instance variables
```
# Example
import React from "react";
import { useSingleInstanceVar, useSingleState } from "nice-hooks";
export const UseSingleInstanceVarDemoComp = () => {
const instanceVal = useSingleInstanceVar({
interval: null
});
const [state, setState] = useSingleState({ count: 0 });
function start() {
instanceVal.interval = setInterval(
() => setState({ count: state.count + 1 }),
1000
);
}
function stop() {
const interval = instanceVal.interval;
interval && clearInterval(interval);
}
return (
{state.count}
Start
Stop
);
};
```
## Contribute
* `git clone https://github.com/daniel-dx/nice-hooks.git`
* `cd nice-hooks`
* `npm install`
* `npm run test`