Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dispix/react-pirate
https://github.com/dispix/react-pirate
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dispix/react-pirate
- Owner: dispix
- License: mit
- Created: 2018-10-28T16:57:53.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T04:28:31.000Z (over 3 years ago)
- Last Synced: 2024-04-24T19:04:05.062Z (8 months ago)
- Language: JavaScript
- Size: 101 KB
- Stars: 52
- Watchers: 2
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-pirate`
- awesome-react-hooks-cn - `react-pirate`
- awesome-react-hooks - `react-pirate`
- awesome-react-hooks - `react-pirate`
README
# 🏴☠️ React Pirate
## _Hooks for React 16.7 and above. Arrrr._
## Installation
With [`npm`](https://npmjs.org/):
```
npm install react-pirate
```
With [`yarn`](https://yarnpkg.com/):
```
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:
```jsx
import React, { useState } from 'react'
import { usePrevious } from 'react-pirate'
function Pirate(props) {
const [shipCount, setShipCount] = useState(props.ship ? 1 : 0)
const previousShip = usePrevious(props.ship)
if (props.ship && previousShip !== props.ship) {
setShipCount(shipCount + 1)
}
switch (shipCount) {
case 0:
return
I am an aspiring pirate !
case 1:
return I have served on one ship !
default:
return (
I am a veteran pirate. I have served on {shipCount} ships !
)
}
}
```
- `useTimeout` and `useInterval` are used for timing:
```jsx
import React, { useState } from 'react'
import { useTimeout, useInterval, usePrevious } from 'react-pirate'
function Pirate(props) {
const [currentTime, setCurrentTime] = useState(0)
const [previousTime, setPreviousTime] = useState(0)
const previousShip = usePrevious(props.ship)
if (props.ship !== previousShip) {
setPreviousTime(currentTime)
}
useInterval(() => setCurrentTime(currentTime + 1000), 1000)
return (
I've been serving on this ship for {currentTime} seconds !
{previousTime && (
Before that, I served on {previousShip} for {previousTime} seconds !
)}
)
}
function Ship(props) {
useTimeout(() => {
if (props.isAtSea) {
props.returnToPort()
}
}, 1000)
return (
{props.name} can't sail for too long or it'll run out of water!
)
}
```
- `useToggle` to easily manage a boolean value:
```jsx
import React from 'react'
import { useToggle } from 'react-pirate'
function Pirate(props) {
const sleeping = useToggle(false)
if (props.isNight) {
sleeping.setTrue()
}
return (
I am {sleeping.value ? 'sleeping' : 'awake'} right now.
{sleeping.value ? 'Wake up' : 'Sleep'}
)
}
```
- ... 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`:
```jsx
import React, { useLayoutEffect } from 'react'
import { useMount } from 'react-pirate'
function Ship(props) {
useMount(() => {
// quite similar to `componentDidMount`
})
return
This is my Ship, its name is {props.name}
}
function Captain(props) {
useMount(
() => {
// similar to `componentDidMount`
},
{ hook: useLayoutEffect },
)
return
This is the captain of the {props.shipName} !
}
```
- `componentDidUpdate`:
```jsx
import React, { useLayoutEffect } from 'react'
import { useUpdate, useLegacyUpdate } from 'react-pirate'
function Ship(props) {
useUpdate(() => {
// quite similar to `componentDidUpdate`
})
return
This is my Ship, its name is {props.name}
}
function Captain(props) {
useUpdate(
() => {
// similar to `componentDidUpdate`
},
{ hook: useLayoutEffect },
)
return
This is the captain of the {props.shipName} !
}
```
- `componentWillUnmount`:
```jsx
import React, { useLayoutEffect } from 'react'
import { useUnmount, useLegacyUnmount } from 'react-pirate'
function Ship(props) {
useUnmount(() => {
// quite similar to `componentWillUnmount`
})
return
This is my Ship, its name is {props.name}
}
function Captain(props) {
useUnmount(
() => {
// similar to `componentWillUnmount`
},
{ hook: useLayoutEffect },
)
return
This is the captain of the {props.shipName} !
}
```
- `getDerivedStateFromProps` has no need for hook ! Just update your state in your component:
```jsx
import React from 'react'
import { useState } from 'react'
function FirstMate(props) {
const [captain, setCaptain] = useState(null)
if (!captain && props.ship) {
setCaptain(props.ship.captain)
}
return
I am the first mate of captain {captain.name} until my death !
}
```
- `getSnapshotBeforeUpdate`, `getDerivedStateFromError`, `componentDidCatch`: 🏳️ We surrender ! [React does not provide solutions for these hooks yet](https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes).
```
```