🏴☠️ React Pirate
Hooks for React 16.7 and above. Arrrr.
Installation
With npm
:
npm install react-pirate
With yarn
:
yarn add react-pirate
Usage
Utility hooks
-
usePrevious
stores a value so you can compare it to the current value ! Quite useful to store a piece of props or state and compare changes between renders:import React useState from 'react'import usePrevious from 'react-pirate'{const shipCount setShipCount =const previousShip =if propsship && previousShip !== propsshipswitch shipCountcase 0:return <p>I am an aspiring pirate !</p>case 1:return <p>I have served on one ship !</p>default:return<p>I am a veteran pirate I have served on shipCount ships !</p>} -
useTimeout
anduseInterval
are used for timing:import React useState from 'react'import useTimeout useInterval usePrevious from 'react-pirate'{const currentTime setCurrentTime =const previousTime setPreviousTime =const previousShip =if propsship !== previousShipreturn<div><p> been serving on this ship for currentTime seconds !</p>previousTime &&<p>Before that I served on previousShip for previousTime seconds !</p></div>}{return<p>propsname sail for too long or run out of water!</p>} -
useToggle
to easily manage a boolean value:import React from 'react'import useToggle from 'react-pirate'{const sleeping =if propsisNightsleepingreturn<div><p>I am sleepingvalue ? 'sleeping' : 'awake' right now</p><button =>sleepingvalue ? 'Wake up' : 'Sleep'</button></div>} -
... More to come !
Lifecycle hooks
Lifecycle hooks helps you simulate your good ol' React.Component
lifecycle methods with hooks. These hooks use useEffect
internally, but you can specify another React hook if needed :
-
componentDidMount
:import React useLayoutEffect from 'react'import useMount from 'react-pirate'{return <p>This is my Ship its name is propsname</p>}{return <p>This is the captain of the propsshipName !</p>} -
componentDidUpdate
:import React useLayoutEffect from 'react'import useUpdate useLegacyUpdate from 'react-pirate'{return <p>This is my Ship its name is propsname</p>}{return <p>This is the captain of the propsshipName !</p>} -
componentWillUnmount
:import React useLayoutEffect from 'react'import useUnmount useLegacyUnmount from 'react-pirate'{return <p>This is my Ship its name is propsname</p>}{return <p>This is the captain of the propsshipName !</p>} -
getDerivedStateFromProps
has no need for hook ! Just update your state in your component:import React from 'react'import useState from 'react'{const captain setCaptain =if !captain && propsshipreturn <p>I am the first mate of captain captainname until my death !</p>} -
getSnapshotBeforeUpdate
,getDerivedStateFromError
,componentDidCatch
: 🏳️ We surrender ! React does not provide solutions for these hooks yet.