beizhedenglong / React Hooks Lib
Licence: mit
A set of reusable React Hooks.
Stars: โญ 460
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Hooks Lib
Hooks
FullStack | Zero Api | Using "React Hooks" to develop the back-end | Vite
Stars: โญ 367 (-20.22%)
Mutual labels: hooks
React Native Version
๐ข Version your React Native or Expo app in a `npm version` fashion.
Stars: โญ 408 (-11.3%)
Mutual labels: hooks
Vscode Es7 Javascript React Snippets
Extension for Javascript/React snippets with search supporting ES7 and babel features
Stars: โญ 435 (-5.43%)
Mutual labels: hooks
React Hook Form
๐ React Hooks for form state management and validation (Web + React Native)
Stars: โญ 24,831 (+5298.04%)
Mutual labels: hooks
React Admin Template
Simple React admin template - Hooks, Redux, Bootstrap โ
๐ค
Stars: โญ 404 (-12.17%)
Mutual labels: hooks
Clean React
Sistema em ReactJs usando Hooks, Typescript, TDD, Clean Architecture, Design Patterns e SOLID principles
Stars: โญ 408 (-11.3%)
Mutual labels: hooks
Use Onclickoutside
React hook for listening for clicks outside of an element.
Stars: โญ 361 (-21.52%)
Mutual labels: hooks
React Recipes
๐ฉโ๐ณ A React Hooks utility library containing popular customized hooks
Stars: โญ 452 (-1.74%)
Mutual labels: hooks
Openpbs
An HPC workload manager and job scheduler for desktops, clusters, and clouds.
Stars: โญ 427 (-7.17%)
Mutual labels: hooks
Hamburger React
Animated hamburger menu icons for React (1.5 KB) ๐
Stars: โญ 391 (-15%)
Mutual labels: hooks
Local Storage
React hook which syncs localStorage[key] with the comp.
Stars: โญ 402 (-12.61%)
Mutual labels: hooks
Use Scroll Position
Use scroll position ReactJS hook done right
Stars: โญ 414 (-10%)
Mutual labels: hooks
React Query
โ๏ธ Hooks for fetching, caching and updating asynchronous data in React
Stars: โญ 24,427 (+5210.22%)
Mutual labels: hooks
React Uploady
Modern file uploading - components & hooks for React
Stars: โญ 372 (-19.13%)
Mutual labels: hooks
Release It
๐ Automate versioning and package publishing
Stars: โญ 4,773 (+937.61%)
Mutual labels: hooks
Beautiful React Hooks
๐ฅ A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development ๐ฅ
Stars: โญ 5,242 (+1039.57%)
Mutual labels: hooks
React Hooks Lib ยท
A set of reusable React Hooks.
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
Installation
npm i react-hooks-lib --save
Examples
Visit storybook
Hooks
Name | Arguments | Returns |
---|---|---|
Lifecycles |
||
useDidMount |
f | - |
useWillUnmount |
f | - |
useDidUpdate |
f, conditions | - |
State |
||
createContextState |
initial | { ContextProvider, ContextConsumer, set, useSelector, useSet } |
createGlobalState |
initial | { GlobalProvider, GlobalConsumer, set, useSelector, useSet } |
useMergeState |
initial | { state, set } |
useNestedState |
initial | { state, get, set } |
useStateCallback |
initial, f | { state, set } |
useUndo |
initial | { past, present, future, set, undo, redo } |
useCounter |
initial | { count, set, reset, inc, dec } |
useToggle |
initial | { on, set, reset, toggle } |
useList |
initial | { list, set, reset, push, sort, filter } |
useMap |
initial | { values, set, reset, clear, get, has, del } |
Effect |
||
useShallowEqualEffect |
f, deps | - |
useDeepEqualEffect |
f, deps | - |
Network |
||
useFetch |
initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData } |
useOnlineStatus |
||
Feedback |
||
useHover |
- | { hovered, bind } |
useActive |
- | { active, bind } |
useFocus |
- | { focused, bind } |
useTouch |
- | { touched, bind } |
Data Entry |
||
useField |
initial | { value, set, reset, bind } |
Async |
||
useAsync |
f | { f, loading } |
API
useDidMount(f)
Similar to componentDidMount
in React class component.
Arguments
-
f: () => void
: f is called when component did mount.
import { useDidMount } from 'react-hooks-lib'
const MyComponent = () => {
useDidMount(() => {
console.log('didMount')
})
}
useWillUnmount(f)
Close to the componentWillUnmount
in React class component.
Arguments
-
f: () => void
: f is called when component will unmount.
import { useWillUnmount } from 'react-hooks-lib'
const MyComponent = () => {
useWillUnmount(() => {
console.log('willUnmount')
})
}
useDidUpdate(f, options?)
Similar to componentDidUpdate
, it only runs on updates.
Arguments
-
f: () => Function | void
: f is called on every updates. LikeuseEffect
, f can return a clean-up function. -
conditions?: Array<any>
: Optional array for conditionally firing an effect, same as the second argument passed touseEffect
.
import { useDidUpdate, useCounter } from 'react-hooks-lib'
const MyComponent = () => {
const { count, inc } = useCounter(0)
useDidUpdate(() => {
console.log('DidUpdate')
})
return (
<div>
{`count: ${count}`}
<button onClick={() => inc(1)}>+1</button>
</div>
)
}
createContextState(initial?)
createGlobalState(initial?)
useMergeState(initial?)
Arguments
-
initial?: Object
: Initial state object, default is{}
.
Returns
-
state: Object
: Current state object. -
set: ((Object) => Object) | Object
: LikesetState
in React class component, merge the old and new state together.
import { useMergeState } from 'react-hooks-lib'
const MergeState = () => {
const { state, set } = useMergeState({ name: 'Victor', age: 1 })
return (
<div>
<h3>useMergeState</h3>
<div>
{`state: ${JSON.stringify(state)}`}
<button onClick={() => set(({ age }) => ({ age: age + 1 }))}>age+1</button>
</div>
</div>
)
}
useNestedState
Arguments
-
initial?
: Initial state, default isundefined
.
Returns
-
state
: Current state. -
get(pathString, defaultValue)
: Get value form state at a specificpathString
. eg:get("a.b.c")
/get("" | undefined)
, ifpathString
is empty,it will return the state object. -
set: (pathString, newValue | prevValue => newValue)
: Set value at a specificpathString
. eg:set("a.b.c", prev => prev + 1)
/set("" | undefined, {})
. ifpathString
is empty,it will set the entire state object.
useStateCallback(initial, f?)
useUndo(initial)
useCounter(initial)
import { useCounter } from 'react-hooks-lib'
const Counter = () => {
const {
count, inc, dec, reset,
} = useCounter(1)
return (
<div>
{count}
<button onClick={() => inc(1)}>+1</button>
<button onClick={() => dec(1)}>-1</button>
<button onClick={reset}>reset</button>
</div>
)
}
useToggle(initial)
import { useToggle } from 'react-hooks-lib'
const Toggle = () => {
const { on, toggle, reset } = useToggle(false)
return (
<div>
{String(on)}
<button onClick={toggle}>toggle</button>
<button onClick={reset}>reset</button>
</div>
)
}
useList(initial)
import { useList } from 'react-hooks-lib'
const List = () => {
const { list, sort, filter } = useList([1, 4, 2, 3, 4, 2, 6, 8, 3, 4])
return (
<div>
list:
{JSON.stringify(list)}
<button onClick={() => sort((x, y) => x - y)}>sort</button>
<button onClick={() => filter(x => x >= 4)}> greater than or equal to 4</button>
</div>
)
}
useMap(initial)
useFetch(initialUrl, initialOptions?, onMount?)
import { useField, useFetch } from 'react-hooks-lib'
const Fetch = () => {
const getUrl = text => `https://api.github.com/search/repositories?q=${text}`
const { value, bind } = useField('react')
const { data, loading, setUrl } = useFetch(getUrl('react'))
return (
<div>
<h3>useFetch</h3>
<input type="text" value={value} {...bind} />
<button onClick={() => {
setUrl(getUrl(value))
}}
>
search
</button>
{
loading
? <div>Loading...</div>
: (<span>{`total_count: ${data.total_count}`}</span>)
}
</div>
)
}
useOnlineStatus()
useHover()
import { useHover } from 'react-hooks-lib'
const Hover = () => {
const { hovered, bind } = useHover()
return (
<div>
<div {...bind}>
hovered:
{String(hovered)}
</div>
</div>
)
}
useActive()
useFocus()
useTouch()
useField(initial)
import {useField} from 'react-hooks-lib'
const Input = () => {
const { value, bind } = useField('Type Here...')
return (
<div>
input text:
{value}
<input type="text" {...bind} />
</div>
)
}
const Select = () => {
const { value, bind } = useField('apple')
return (
<div>
selected:
{value}
<select {...bind}>
<option value="apple">apple</option>
<option value="orange">orange</option>
</select>
</div>
)
}
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].