gm-react-hanger
v2.4.1
Published
Set of a helpful hooks, for different specific to some primitives types state changing helpers
Downloads
241
Readme
🙋♂️ fork by react-hanger
gm-react-hanger
Set of a helpful hooks, for different specific to some primitives types state changing helpers. Has two APIs:
- First and original from v1 is based on object destructuring e.g.
const { value, toggle } = useBoolean(false)
(Docs below) - Second API (recommended why?) is based on more idiomatic to React hooks API, e.g. like
useState
with array destructuringconst [value, actions] = useBoolean(false)
(Docs)
Install
yarn add gm-react-hanger
Usage
import React, { Component } from 'react';
import { useInput, useBoolean, useNumber, useArray, useOnMount, useOnUnmount } from 'react-hanger';
const App = () => {
const newTodo = useInput('');
const showCounter = useBoolean(true);
const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
const counter = useNumber(0);
const todos = useArray(['hi there', 'sup', 'world']);
const rotatingNumber = useNumber(0, {
lowerLimit: 0,
upperLimit: 4,
loop: true,
});
return (
<div>
<button onClick={showCounter.toggle}> toggle counter </button>
<button onClick={() => counter.increase()}> increase </button>
{showCounter.value && <span> {counter.value} </span>}
<button onClick={() => counter.decrease()}> decrease </button>
<button onClick={todos.clear}> clear todos </button>
<input type="text" value={newTodo.value} onChange={newTodo.onChange} />
</div>
);
};
Example
API reference (object destructuring)
How to import?
import { useBoolean } from 'react-hanger' // will import all of functions
import useBoolean from 'react-hanger/useBoolean' // will import only this function
useStateful
Just an alternative syntax to useState
, because it doesn't need array destructuring.
It returns an object with value
and a setValue
method.
const username = useStateful('test');
username.setValue('tom');
console.log(username.value);
useBoolean
const showCounter = useBoolean(true);
Methods:
toggle
setTrue
setFalse
useNumber
const counter = useNumber(0);
const limitedNumber = useNumber(3, { upperLimit: 5, lowerLimit: 3 });
const rotatingNumber = useNumber(0, {
upperLimit: 5,
lowerLimit: 0,
loop: true,
});
Methods:
Both increase
and decrease
take an optional amount
argument which is 1 by default, and will override the step
property if it's used in the options.
increase(amount = 1)
decrease(amount = 1 )
Options:
lowerLimit
upperLimit
loop
step
- sets the increase/decrease amount of the number upfront, but it can still be overriden bynumber.increase(3)
ornumber.decrease(5)
useInput
const newTodo = useInput('');
<input value={newTodo.value} onChange={newTodo.onChange} />
<input {...newTodo.eventBind} />
<Slider {...newTodo.valueBind} />
Methods:
clear
onChange
eventBind
- binds thevalue
andonChange
props to an input that hase.target.value
valueBind
- binds thevalue
andonChange
props to an input that's using onlyvalue
inonChange
(like most external components)
Properties:
hasValue
useArray
const todos = useArray([]);
Methods:
add
clear
removeIndex
removeById
- if array consists of objects with some specificid
that you pass all of them will be removedmove
- moves item from position to position shifting other elements.
So if input is [1, 2, 3, 4, 5]
from | to | expected
3 | 0 | [4, 1, 2, 3, 5]
-1 | 0 | [5, 1, 2, 3, 4]
1 | -2 | [1, 3, 4, 2, 5]
-3 | -4 | [1, 3, 2, 4, 5]
useMap
const { value, set } = useMap([['key', 'value']]);
const { value: anotherValue, remove } = useMap(new Map([['key', 'value']]));
Actions:
set
remove
clear
initialize
- applies tuples or map instancessetValue
useSetState
const { state, setState } = useSetState({ loading: false });
setState({ loading: true, data: [1, 2, 3] });
Methods:
setState(value)
- will merge thevalue
with the currentstate
(like this.setState works in React)
Properties:
state
- the current state
usePrevious
Use it to get the previous value of a prop or a state value.
It's from the official React Docs.
It might come out of the box in the future.
const Counter = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
<h1>
Now: {count}, before: {prevCount}
</h1>
);
};
useActions
return bound dispatch actions
const { action1, action2 } = useActions(actions);
// dispatch action
action1();
useDebounce
see lodash debounce
const fetch = () {...};
const debounceFetch = useDebounce(fetch);
useShallowEqualSelector
useRestore
/**
* save the current application state to top.history.state
* restore the status of the application when refreshing or rebounding
*/
const App = () => {
/**
* react-router history, In general: stateContainer._history
*/
useRestore(history);
...
}
useInterval
see Making setInterval Declarative with React Hooks
useCountdown
const { rt, start } = useCountdown(SECOND);
const [text, setText] = useState('发送验证码');
useEffect(() => {
if (rt > 0) {
setText(`${rt}秒后重试`);
} else {
setText('发送验证码');
}
}, [rt]);
// button click -> start