Hi Guys, could anyone can share some bast custom hooks ?
thanks.
For further actions, you may consider blocking this person and/or reporting abuse
Hi Guys, could anyone can share some bast custom hooks ?
thanks.
For further actions, you may consider blocking this person and/or reporting abuse
thinkThroo -
Grëg Häris -
Abdulnasır Olcan -
Roman -
Top comments (2)
You can find some pretty good hooks here.
github.com/hassanzohdy/react-hooks
Here are some examples of what you will find there.
useFetcher
This is a powerful fetcher hook that will help you to fetch data from the server and handle the loading state and errors but with more configurations.
You can also know which is the current page you're on by using
currentPage
property.Another cool feature is
paginatable
property which tells you whether you should display the pagination buttons or not.You might also use
isLastPage
to know if you're on the last page or not so you can disable theload more
button.Here are the entire properties you can use:
Also you can set fetching options by passing it as the second argument to the
useFetcher
hook.Or you can set the default params by using
setFetchOptions
method.Here is the entire available options
You can see the entire documentation of usage in our article in Dev.to
useInputValue
useInputValue<T>(defaultValue: T): [T: ((newValue): any => void)]
This hook can be very useful when working with form inputs so it will give you an easier state changer callback to update the input value automatically.
The normal way is:
With
useInputValue
It can take the value from various types,as the
onChange
sends an evente
, theuseInputValue
valueDetector will try to get the value from any of the followinge.target.value
e.value
e.id
e.text
e
If no value for
e
it will be set as empty string.useOnce
useOnce(callback: () => (void | Destructor))
Works exactly the same as
useEffect(() => {}, [])
but this one will relive you from adding the second argument and will skip the eslint checker for any missing dependencies that will not reflect on the side effect.useForceUpdate
useForceUpdate(): () => void
A very useful hook when you want to re-render the component without using the
useState
hook.useOuterClick
This hook will allow you to detect when the user clicks outside an element.
The
e
represents the click event and the element represent the value of thedivRef
's current element.useStateDetector
useStateDetector(propValue: any): [propValue: any, valueUpdater: (newValue: any) => void]
This hook works exactly the same as
useState
except it will be updated if the given value is updated.This one is very useful if you're relying on a value passed from the parent component and needs to detect if it has been changed.
After the first click on the button the value will remain false, now let's try
useStateDetector
In this case it will always get updated whenever the passed
disabled
prop in theChildComponent
is updated.thank you for your advice .