⚓ React Captain 
A collection of strongly typed React hooks and contexts.
Live demo at https://react-captain.soywod.me.
Table of contents
Installation
yarn add react-captain
# or
npm install react-captainExamples
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 installTo start the development server:
yarn startTo build the lib:
yarn buildTo build the demo:
yarn build:demoTests
Unit tests
Unit tests are handled by Jest (.test files) and React
Testing Library
(.spec files).
yarn test:unitEnd-to-end tests
End-to-end tests are handled by Cypress (.e2e
files).
yarn start
yarn test:e2eChangelog
See CHANGELOG.md.
License
MIT - Copyright © 2019-2020 soywod.