Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zakariaharti/react-hookedup
:alien: A collection of useful React hooks
https://github.com/zakariaharti/react-hookedup
hooks react react-hooks useful-utilities
Last synced: about 1 month ago
JSON representation
:alien: A collection of useful React hooks
- Host: GitHub
- URL: https://github.com/zakariaharti/react-hookedup
- Owner: zakariaharti
- License: mit
- Created: 2018-12-21T21:45:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:49:22.000Z (almost 2 years ago)
- Last Synced: 2024-04-27T03:43:24.936Z (8 months ago)
- Topics: hooks, react, react-hooks, useful-utilities
- Language: TypeScript
- Homepage: https://zakariaharti.github.io/react-hookedup
- Size: 6.22 MB
- Stars: 86
- Watchers: 2
- Forks: 6
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-hookedup`
- awesome-react-hooks-cn - `react-hookedup`
- awesome-react-hooks - `react-hookedup`
- awesome-react-hooks - `react-hookedup`
- awesome-react-hooks - react-hookedup - 👽 A collection of useful React hooks (Packages)
README
[](https://www.npmjs.com/package/react-hookedup)
[](https://github.com/zakariaharti/react-hookedup/blob/master/LICENSE.md)
[](https://zakariaharti.github.io/react-hookedup/)
>Hooks require at least React 16.8
## Installation
**using npm**
```
npm install react-hookedup --save
```
**using yarn**
```
yarn add react-hookedup
```
# Demo
Visit [here](https://zakariaharti.github.io/react-hookedup)
# hooks
### `common hooks`
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| [useArray](#useArray) | useful hook for manipulating arrays | initial value | {value, setValue, removeById, removeIndex, clear} |
| [useBoolean](#useBoolean) | useful hook for manipulating booleans | initial value | {value, setValue, toggle, setTrue, setFalse} |
| [useCounter](#useCounter) | counter hook | value,{upperLimit,lowerLimit,step,loop} | {value, setValue, increase,decrease} |
| [useFocus](#useFocus) | focus hook | null | {focused, bind} |
| [useHover](#useHover) | hover hook | null | {hovered, bind} |
| [useInput](#useInput) | input handling hook | initial value | {value, setValue, onChange, bindToInput, bind, hasValue, clear} |
### `lifecycles hooks`
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| [useLifecycleHooks](#useLifecycleHooks) | use lifecycle methods | {onMount, onUnmount} | void |
| [useOnMount](#useOnMount) | componentDidMount like lifecycle | Function | void |
| [useOnUnmount](#useOnUnmount) | componentWillUnmount like lifecycle | Function | void |
| [useMergeState](#useMergeState) | merge the previous state with new one | initial value of the state | {setState: Function, state} |
| [usePrevious](#usePrevious) | get the previous value of the state | initial value of the state | the previous value |
### `timers hooks`
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| [useInterval](#useInterval) | use setInterval via hooks | {function, delay} | void |
| [useTimeout](#useTimeout) | use setTimeout via hooks | {function, delay} | void |
### `network hooks`
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| [useOnLineStatus](#useOnLineStatus) | check if the browser is connected to the internet | null| {online} |
# Usage
### `useArray`
```js
import { useArray } from 'react-hookedup';
const ExampleUseArray = () => {
const {
add,
clear,
removeIndex,
value: currentArray
} = useArray(['cat','dog','bird']);
const {
bindToInput,
value
} = useInput('');
const {
bindToInput: bindToInput2,
value: value2
} = useInput('');
return(
current array is : {JSON.stringify(currentArray)}
add element :
add(value)}>add
remove element by index :
removeIndex(value2)}>delete
delete all items :
clear()}>clear
)
};
```
### `useBoolean`
```js
import { useBoolean } from 'react-hookedup';
const ExampleUseBoolean = () => {
const {toggle, value} = useBoolean(false);
return(
{JSON.stringify(value)}
toggle()}>toggle
);
};
```
Methods:
- `toggle`
- `setTrue`
- `setFalse`
### `useOnMount`
```jsx
import { useOnMount } from 'react-hookedup';
const App = () => {
useOnMount(() => console.log("hello world"));
return
hello world ;
};
```
### `useOnUnmount`
```jsx
const App = () => {
useOnUnmount(() => console.log("goodbye world"));
return
goodbye world ;
};
```
### `useLifecycleHooks`
```jsx
const App = () => {
useLifecycleHooks({
onMount: () => console.log("mounted!"),
onUnmount: () => console.log("unmounting!")
});
return
hello world ;
};
```
### `useCounter`
```jsx
const counter = useCounter(0);
const limitedNumber = useCounter(3, { upperLimit: 5, lowerLimit: 3 });
const rotatingNumber = useCounter(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 by `number.increase(3)` or `number.decrease(5)`
### `useInput`
```jsx
const newTodo = useInput("");
```
```jsx
```
```jsx
```
Methods:
- `clear`
- `onChange`
- `bindToInput` - binds the `value` and `onChange` props to an input that has `e.target.value`
- `bind` - binds the `value` and `onChange` props to an input that's using only `e` in `onChange` (like most external components)
Properties:
- `hasValue`
### `useFocus`
```jsx
const ExampleUseFocus = () => {
const {focused, bind} = useFocus();
return(
this is input is : {focused ? 'focused' : 'not focused'}
);
};
```
### `useHover`
```jsx
const ExampleUseHover = () => {
const {hovered, bind} = useHover();
return(
this is input is : {hovered ? 'hovered' : 'not hovered'}
);
};
```
### `useArray`
```jsx
const todos = useArray([]);
```
Methods:
- `add`
- `clear`
- `removeIndex`
- `removeById`
### useMergeState
```jsx
const { state, setState } = useMergeState({ loading: false });
setState({ loading: true, data: [1, 2, 3] });
```
Methods:
- `setState(value)` - will merge the `value` with the current `state` (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](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state).
It might come out of the box in the future.
```jsx
const Counter = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
Now: {count}, before: {prevCount}
);
};
```
### `useInterval`
```jsx
const useIntervalExample = () => {
useInterval(() => alert('hello world'), 1500);
return (
I will alert in 1.5 s
);
};
```
### `useTimeout`
```jsx
const useTimeoutExample = () => {
useTimeout(() => alert('hello world'), 1500);
return (
I will alert in 1.5 s
);
};
```
### `useOnLineStatus`
```jsx
const useOnLineStatusExample = () => {
const {online} = useOnLineStatus();
return (
you are : {online ? 'online' : 'offline'}
);
};
```