🏴‍☠️ 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>
}