Skip to content

dispix/react-pirate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published