{"id":13429560,"url":"https://github.com/dispix/react-pirate","last_synced_at":"2025-06-22T21:06:11.180Z","repository":{"id":47999268,"uuid":"155094043","full_name":"dispix/react-pirate","owner":"dispix","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-11T04:28:31.000Z","size":103,"stargazers_count":52,"open_issues_count":6,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T09:54:45.560Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dispix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-28T16:57:53.000Z","updated_at":"2023-07-10T09:14:42.000Z","dependencies_parsed_at":"2022-08-12T16:11:31.313Z","dependency_job_id":null,"html_url":"https://github.com/dispix/react-pirate","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/dispix/react-pirate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dispix%2Freact-pirate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dispix%2Freact-pirate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dispix%2Freact-pirate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dispix%2Freact-pirate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dispix","download_url":"https://codeload.github.com/dispix/react-pirate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dispix%2Freact-pirate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261367513,"owners_count":23147852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T02:00:41.702Z","updated_at":"2025-06-22T21:06:06.144Z","avatar_url":"https://github.com/dispix.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# 🏴‍☠️ React Pirate\n\n## _Hooks for React 16.7 and above. Arrrr._\n\n## Installation\n\nWith [`npm`](https://npmjs.org/):\n\n```\nnpm install react-pirate\n```\n\nWith [`yarn`](https://yarnpkg.com/):\n\n```\nyarn add react-pirate\n```\n\n## Usage\n\n### Utility hooks\n\n- `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:\n\n  ```jsx\n  import React, { useState } from 'react'\n  import { usePrevious } from 'react-pirate'\n\n  function Pirate(props) {\n    const [shipCount, setShipCount] = useState(props.ship ? 1 : 0)\n    const previousShip = usePrevious(props.ship)\n\n    if (props.ship \u0026\u0026 previousShip !== props.ship) {\n      setShipCount(shipCount + 1)\n    }\n\n    switch (shipCount) {\n      case 0:\n        return \u003cp\u003eI am an aspiring pirate !\u003c/p\u003e\n      case 1:\n        return \u003cp\u003eI have served on one ship !\u003c/p\u003e\n      default:\n        return (\n          \u003cp\u003eI am a veteran pirate. I have served on {shipCount} ships !\u003c/p\u003e\n        )\n    }\n  }\n  ```\n\n- `useTimeout` and `useInterval` are used for timing:\n\n  ```jsx\n  import React, { useState } from 'react'\n  import { useTimeout, useInterval, usePrevious } from 'react-pirate'\n\n  function Pirate(props) {\n    const [currentTime, setCurrentTime] = useState(0)\n    const [previousTime, setPreviousTime] = useState(0)\n    const previousShip = usePrevious(props.ship)\n\n    if (props.ship !== previousShip) {\n      setPreviousTime(currentTime)\n    }\n\n    useInterval(() =\u003e setCurrentTime(currentTime + 1000), 1000)\n\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eI've been serving on this ship for {currentTime} seconds !\u003c/p\u003e\n        {previousTime \u0026\u0026 (\n          \u003cp\u003e\n            Before that, I served on {previousShip} for {previousTime} seconds !\n          \u003c/p\u003e\n        )}\n      \u003c/div\u003e\n    )\n  }\n\n  function Ship(props) {\n    useTimeout(() =\u003e {\n      if (props.isAtSea) {\n        props.returnToPort()\n      }\n    }, 1000)\n\n    return (\n      \u003cp\u003e{props.name} can't sail for too long or it'll run out of water!\u003c/p\u003e\n    )\n  }\n  ```\n\n- `useToggle` to easily manage a boolean value:\n\n  ```jsx\n  import React from 'react'\n  import { useToggle } from 'react-pirate'\n\n  function Pirate(props) {\n    const sleeping = useToggle(false)\n\n    if (props.isNight) {\n      sleeping.setTrue()\n    }\n\n    return (\n      \u003cdiv\u003e\n        \u003cp\u003eI am {sleeping.value ? 'sleeping' : 'awake'} right now.\u003c/p\u003e\n        \u003cbutton onClick={sleeping.toggle}\u003e\n          {sleeping.value ? 'Wake up' : 'Sleep'}\n        \u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n  ```\n\n- ... More to come !\n\n### Lifecycle hooks\n\nLifecycle 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 :\n\n- `componentDidMount`:\n\n  ```jsx\n  import React, { useLayoutEffect } from 'react'\n  import { useMount } from 'react-pirate'\n\n  function Ship(props) {\n    useMount(() =\u003e {\n      // quite similar to `componentDidMount`\n    })\n\n    return \u003cp\u003eThis is my Ship, its name is {props.name}\u003c/p\u003e\n  }\n\n  function Captain(props) {\n    useMount(\n      () =\u003e {\n        // similar to `componentDidMount`\n      },\n      { hook: useLayoutEffect },\n    )\n\n    return \u003cp\u003eThis is the captain of the {props.shipName} !\u003c/p\u003e\n  }\n  ```\n\n- `componentDidUpdate`:\n\n  ```jsx\n  import React, { useLayoutEffect } from 'react'\n  import { useUpdate, useLegacyUpdate } from 'react-pirate'\n\n  function Ship(props) {\n    useUpdate(() =\u003e {\n      // quite similar to `componentDidUpdate`\n    })\n\n    return \u003cp\u003eThis is my Ship, its name is {props.name}\u003c/p\u003e\n  }\n\n  function Captain(props) {\n    useUpdate(\n      () =\u003e {\n        // similar to `componentDidUpdate`\n      },\n      { hook: useLayoutEffect },\n    )\n\n    return \u003cp\u003eThis is the captain of the {props.shipName} !\u003c/p\u003e\n  }\n  ```\n\n- `componentWillUnmount`:\n\n  ```jsx\n  import React, { useLayoutEffect } from 'react'\n  import { useUnmount, useLegacyUnmount } from 'react-pirate'\n\n  function Ship(props) {\n    useUnmount(() =\u003e {\n      // quite similar to `componentWillUnmount`\n    })\n\n    return \u003cp\u003eThis is my Ship, its name is {props.name}\u003c/p\u003e\n  }\n\n  function Captain(props) {\n    useUnmount(\n      () =\u003e {\n        // similar to `componentWillUnmount`\n      },\n      { hook: useLayoutEffect },\n    )\n\n    return \u003cp\u003eThis is the captain of the {props.shipName} !\u003c/p\u003e\n  }\n  ```\n\n- `getDerivedStateFromProps` has no need for hook ! Just update your state in your component:\n\n  ```jsx\n  import React from 'react'\n  import { useState } from 'react'\n\n  function FirstMate(props) {\n    const [captain, setCaptain] = useState(null)\n\n    if (!captain \u0026\u0026 props.ship) {\n      setCaptain(props.ship.captain)\n    }\n\n    return \u003cp\u003eI am the first mate of captain {captain.name} until my death !\u003c/p\u003e\n  }\n  ```\n\n- `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).\n\n```\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdispix%2Freact-pirate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdispix%2Freact-pirate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdispix%2Freact-pirate/lists"}