zakariaharti / React Hookedup
Licence: mit
👽 A collection of useful React hooks
Stars: ✭ 68
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Hookedup
React Context Hook
A React.js global state manager with Hooks
Stars: ✭ 50 (-26.47%)
Mutual labels: hooks
Use Firebase Auth
A custom React Hook that provides a declarative interface for Firebase Auth.
Stars: ✭ 61 (-10.29%)
Mutual labels: hooks
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-41.18%)
Mutual labels: hooks
Fontmod
Simple hook tool to change Win32 program font.
Stars: ✭ 1,064 (+1464.71%)
Mutual labels: hooks
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+1298.53%)
Mutual labels: hooks
One Time Callbacks
Enable WordPress actions and filter callbacks to be called exactly once.
Stars: ✭ 59 (-13.24%)
Mutual labels: hooks
Time Capsule
Write a letter to your future self - receive it in one year.
Stars: ✭ 48 (-29.41%)
Mutual labels: hooks
Pcsgolh
PCSGOLH - Pointless Counter-Strike: Global Offensive Lua Hooks. A open-source Lua API for CS:GO hacking written in modern C++
Stars: ✭ 56 (-17.65%)
Mutual labels: hooks
Next Purescript Example
Simple example app using Next.js with Purescript
Stars: ✭ 35 (-48.53%)
Mutual labels: hooks
E Commerce App React Native
E-commerce App UI. React native, Expo managed flow, React navigation v5, Notification.
Stars: ✭ 61 (-10.29%)
Mutual labels: hooks
React Rules Of Hooks Ppx
This ppx validates the rules of React hooks.
Stars: ✭ 34 (-50%)
Mutual labels: hooks
React 5ddm
5d动漫,使用React,服务端渲染,接口(不开源)来自赞片CMS。仅供参考,交流群:14646823 欢迎加入
Stars: ✭ 50 (-26.47%)
Mutual labels: hooks
Jsonapi React
A minimal JSON:API client and React hooks for fetching, updating, and caching remote data.
Stars: ✭ 65 (-4.41%)
Mutual labels: hooks
React Intl Hooks
React hooks for internationalization without the hassle ⚛️🌍
Stars: ✭ 64 (-5.88%)
Mutual labels: hooks
Aspects
Delightful, simple library for aspect oriented programming in Objective-C and Swift.
Stars: ✭ 8,255 (+12039.71%)
Mutual labels: hooks
Hooks require at least React 16.8
Installation
using npm
npm install react-hookedup --save
using yarn
yarn add react-hookedup
Demo
Visit here
hooks
common hooks
Name | Description | Arguments | Returns |
---|---|---|---|
useArray | useful hook for manipulating arrays | initial value | {value, setValue, removeById, removeIndex, clear} |
useBoolean | useful hook for manipulating booleans | initial value | {value, setValue, toggle, setTrue, setFalse} |
useCounter | counter hook | value,{upperLimit,lowerLimit,step,loop} | {value, setValue, increase,decrease} |
useFocus | focus hook | null | {focused, bind} |
useHover | hover hook | null | {hovered, bind} |
useInput | input handling hook | initial value | {value, setValue, onChange, bindToInput, bind, hasValue, clear} |
lifecycles hooks
Name | Description | Arguments | Returns |
---|---|---|---|
useLifecycleHooks | use lifecycle methods | {onMount, onUnmount} | void |
useOnMount | componentDidMount like lifecycle | Function | void |
useOnUnmount | componentWillUnmount like lifecycle | Function | void |
useMergeState | merge the previous state with new one | initial value of the state | {setState: Function, state} |
usePrevious | get the previous value of the state | initial value of the state | the previous value |
timers hooks
Name | Description | Arguments | Returns |
---|---|---|---|
useInterval | use setInterval via hooks | {function, delay} | void |
useTimeout | use setTimeout via hooks | {function, delay} | void |
network hooks
Name | Description | Arguments | Returns |
---|---|---|---|
useOnLineStatus | check if the browser is connected to the internet | null | {online} |
Usage
useArray
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(
<div>
<p>
current array is : {JSON.stringify(currentArray)}
</p>
<div>
add element :
<input {...bindToInput} />
<button onClick={() => add(value)}>add</button>
</div>
<div>
remove element by index :
<input {...bindToInput2} />
<button onClick={() => removeIndex(value2)}>delete</button>
</div>
<div>
delete all items :
<button onClick={() => clear()}>clear</button>
</div>
</div>
)
};
useBoolean
import { useBoolean } from 'react-hookedup';
const ExampleUseBoolean = () => {
const {toggle, value} = useBoolean(false);
return(
<div>
<p>{JSON.stringify(value)}</p>
<button onClick={() => toggle()}>toggle</button>
</div>
);
};
Methods:
toggle
setTrue
setFalse
useOnMount
import { useOnMount } from 'react-hookedup';
const App = () => {
useOnMount(() => console.log("hello world"));
return <div> hello world </div>;
};
useOnUnmount
const App = () => {
useOnUnmount(() => console.log("goodbye world"));
return <div> goodbye world </div>;
};
useLifecycleHooks
const App = () => {
useLifecycleHooks({
onMount: () => console.log("mounted!"),
onUnmount: () => console.log("unmounting!")
});
return <div> hello world </div>;
};
useCounter
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 bynumber.increase(3)
ornumber.decrease(5)
useInput
const newTodo = useInput("");
<input value={newTodo.value} onChange={newTodo.onChange} />
<input {...newTodo.bindToInput} />
<Slider {...newTodo.bind} />
Methods:
clear
onChange
-
bindToInput
- binds thevalue
andonChange
props to an input that hase.target.value
-
bind
- binds thevalue
andonChange
props to an input that's using onlye
inonChange
(like most external components)
Properties:
hasValue
useFocus
const ExampleUseFocus = () => {
const {focused, bind} = useFocus();
return(
<div>
<p>this is input is : {focused ? 'focused' : 'not focused'}</p>
<input {...bind} />
</div>
);
};
useHover
const ExampleUseHover = () => {
const {hovered, bind} = useHover();
return(
<div>
<p>this is input is : {hovered ? 'hovered' : 'not hovered'}</p>
<input {...bind} />
</div>
);
};
useArray
const todos = useArray([]);
Methods:
add
clear
removeIndex
removeById
useMergeState
const { state, setState } = useMergeState({ 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>
);
};
useInterval
const useIntervalExample = () => {
useInterval(() => alert('hello world'), 1500);
return (
<h1>
I will alert in 1.5 s
</h1>
);
};
useTimeout
const useTimeoutExample = () => {
useTimeout(() => alert('hello world'), 1500);
return (
<h1>
I will alert in 1.5 s
</h1>
);
};
useOnLineStatus
const useOnLineStatusExample = () => {
const {online} = useOnLineStatus();
return (
<h1>
you are : {online ? 'online' : 'offline'}
</h1>
);
};
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].