:anchor: React Captain

A collection of strongly typed React hooks and contexts.

Live demo at https://react-captain.soywod.me.

Table of contents

• Installation
• Examples
  • Click outside
  • Debounce
  • Timeout
  • Interval
  • Stored state
  • Toggle
  • Subject
  • Behavior subject
• Development
• Tests
  • Unit tests
  • End-to-end tests
• Changelog
• License

Installation

yarn add react-captain
# or
npm install react-captain

Examples

Live demo at https://react-captain.soywod.me.

Click outside

Capture click event outside of the given HTMLElement.

import {useClickOutside} from "react-captain"

const Component: FC = () => {
  const ref = useRef<HTMLDivElement | null>(null)
  useClickOutside(ref, () => console.log("Clicked outside!"))

  return (
    <div ref={ref}>
      Click outside
    </div>
  )
}

Debounce

Add debounce to a handler.

import {useDebounce} from "react-captain"

function Component() {
  const handler = useDebounce(() => console.log("Hello!"), 1000)

  return (
    <>
      <button onClick={handler}>
        Say hello with delay
      </button>
      <button onClick={handler.abort}>
        Abort
      </button>
      <button onClick={handler.terminate}>
        Terminate
      </button>
    </>
  )
}

Timeout

A wrapper around setTimeout.

import {useTimeout} from "react-captain"

function Component() {
  const handler = useTimeout(() => console.log("Hello!"), 1000)

  return (
    <>
      <button onClick={handler}>
        Say hello with delay
      </button>
      <button onClick={handler.abort}>
        Abort
      </button>
      <button onClick={handler.terminate}>
        Terminate
      </button>
    </>
  )
}

Interval

A wrapper around setInterval, using toggle.

import {useInterval} from "react-captain"

function Component() {
  const [isOn, toggle] = useInterval(() => console.log("Hello!"))

  return (
    <button onClick={handler}>
      {isOn ? "Stop" : "Say hello"}
    </button>
  )
}

Stored state

A persistant useState, based on React's useState and localForage. Drivers supported: localStorage, WebSQL and IndexedDB.

import {useStoredState} from "react-captain"

function Component() {
  const [value, setValue] = useStoredState("storage-key", "Default value")

  return (
    <button onClick={() => setValue("Value changed!")}>
      {String(value)}
    </button>
  )
}

Toggle

A useState for booleans.

import {useToggle} from "react-captain"

const Component: FC = () => {
  const [isOn, toggle] = useToggle(false)

  return (
    <div>
      <button onClick={toggle}>
        Switch status: {isOn ? "ON" : "OFF"}
      </button>
      <button onClick={() => toggle(false)}>
        Reset toggle
      </button>
    </div>
  )
}

Subject

A wrapper around rxjs.Subject.

import {useSubject} from "react-captain"
import {Subject} from "rxjs"

const subject$ = new Subject<number>()

const Component: FC = () => {
  const [counter, setCounter] = useState(0)
  useSubject(subject$, setCounter)
  return <button onClick={() => subject$(counter + 1)}>{counter}</button>
}

Behavior subject

A wrapper around rxjs.BehaviorSubject.

import {useBehaviorSubject} from "react-captain"
import {BehaviorSubject} from "rxjs"

const subject$ = new BehaviorSubject(0)

const Component: FC = () => {
  const [counter, setCounter] = useBehaviorSubject(subject$, counter => {
    console.log("New counter received:", counter)
  })

  return <button onClick={() => setCounter(counter + 1)}>{counter}</button>
}

Development

git clone https://github.com/soywod/react-captain.git
cd react-captain
yarn install

To start the development server:

yarn start

To build the lib:

yarn build

To build the demo:

yarn build:demo

Tests

Unit tests

Unit tests are handled by Jest (.test files) and React Testing Library (.spec files).

yarn test:unit

End-to-end tests

End-to-end tests are handled by Cypress (.e2e files).

yarn start
yarn test:e2e

Changelog

See CHANGELOG.md.

License

MIT - Copyright © 2019-2020 soywod.