Newfangled Package Modernizer

    react-pirate
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

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

    
    

    Keywords

    Install

    npm i react-pirate

    DownloadsWeekly Downloads

    64

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    16.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • dispix