🏴‍☠️ 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'
  
  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 <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 and useInterval are used for timing:

  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 (
    <div>
      <p>I've been serving on this ship for {currentTime} seconds !</p>
      {previousTime && (
        <p>
          Before that, I served on {previousShip} for {previousTime} seconds !
        </p>
      )}
    </div>
  )
  }
  
  function Ship(props) {
  useTimeout(() => {
    if (props.isAtSea) {
      props.returnToPort()
    }
  }, 1000)
  
  return (
    <p>{props.name} can't sail for too long or it'll run out of water!</p>
  )
  }

• useToggle to easily manage a boolean value:

  import React from 'react'
  import { useToggle } from 'react-pirate'
  
  function Pirate(props) {
  const sleeping = useToggle(false)
  
  if (props.isNight) {
    sleeping.setTrue()
  }
  
  return (
    <div>
      <p>I am {sleeping.value ? 'sleeping' : 'awake'} right now.</p>
      <button onClick={sleeping.toggle}>
        {sleeping.value ? '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'
  
  function Ship(props) {
  useMount(() => {
    // quite similar to `componentDidMount`
  })
  
  return <p>This is my Ship, its name is {props.name}</p>
  }
  
  function Captain(props) {
  useMount(
    () => {
      // similar to `componentDidMount`
    },
    { hook: useLayoutEffect },
  )
  
  return <p>This is the captain of the {props.shipName} !</p>
  }

• componentDidUpdate:

  import React, { useLayoutEffect } from 'react'
  import { useUpdate, useLegacyUpdate } from 'react-pirate'
  
  function Ship(props) {
  useUpdate(() => {
    // quite similar to `componentDidUpdate`
  })
  
  return <p>This is my Ship, its name is {props.name}</p>
  }
  
  function Captain(props) {
  useUpdate(
    () => {
      // similar to `componentDidUpdate`
    },
    { hook: useLayoutEffect },
  )
  
  return <p>This is the captain of the {props.shipName} !</p>
  }

• componentWillUnmount:

  import React, { useLayoutEffect } from 'react'
  import { useUnmount, useLegacyUnmount } from 'react-pirate'
  
  function Ship(props) {
  useUnmount(() => {
    // quite similar to `componentWillUnmount`
  })
  
  return <p>This is my Ship, its name is {props.name}</p>
  }
  
  function Captain(props) {
  useUnmount(
    () => {
      // similar to `componentWillUnmount`
    },
    { hook: useLayoutEffect },
  )
  
  return <p>This is the captain of the {props.shipName} !</p>
  }

• getDerivedStateFromProps has no need for hook ! Just update your state in your component:

  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 <p>I am the first mate of captain {captain.name} until my death !</p>
  }

• getSnapshotBeforeUpdate, getDerivedStateFromError, componentDidCatch: 🏳️ We surrender ! React does not provide solutions for these hooks yet.