https://github.com/soywod/react-captain
:anchor: A collection of strongly typed React hooks and contexts.
https://github.com/soywod/react-captain
collection react react-context react-hooks reactjs typescript
Last synced: 3 months ago
JSON representation
:anchor: A collection of strongly typed React hooks and contexts.
- Host: GitHub
- URL: https://github.com/soywod/react-captain
- Owner: soywod
- License: mit
- Created: 2019-02-28T11:29:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T16:05:25.000Z (almost 3 years ago)
- Last Synced: 2024-05-02T02:26:22.560Z (over 1 year ago)
- Topics: collection, react, react-context, react-hooks, reactjs, typescript
- Language: TypeScript
- Homepage: https://react-captain.soywod.me
- Size: 1.63 MB
- Stars: 16
- Watchers: 3
- Forks: 3
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# :anchor: React Captain [](https://travis-ci.org/soywod/react-captain) [](https://codecov.io/gh/soywod/react-captain) [](https://www.npmjs.com/package/react-captain)
A collection of strongly typed React hooks and contexts.
*Live demo at https://react-captain.soywod.me.*
## Table of contents
- [Installation](#installation)
- [Examples](#examples)
- [Click outside](#click-outside)
- [Debounce](#debounce)
- [Timeout](#timeout)
- [Interval](#interval)
- [Stored state](#stored-state)
- [Toggle](#toggle)
- [Subject](#subject)
- [Behavior subject](#behavior-subject)
- [Development](#development)
- [Tests](#tests)
- [Unit tests](#unit-tests)
- [End-to-end tests](#end-to-end-tests)
- [Changelog](#changelog)
- [License](#license)
## Installation
```bash
yarn add react-captain
# or
npm install react-captain
```
## Examples
*Live demo at https://react-captain.soywod.me.*
### [Click outside](https://github.com/soywod/react-captain/tree/master/src/click-outside)
Capture click event outside of the given HTMLElement.
```typescript
import {useClickOutside} from "react-captain"
const Component: FC = () => {
const ref = useRef(null)
useClickOutside(ref, () => console.log("Clicked outside!"))
return (
Click outside
)
}
```
### [Debounce](https://github.com/soywod/react-captain/tree/master/src/debounce)
Add debounce to a handler.
```typescript
import {useDebounce} from "react-captain"
function Component() {
const handler = useDebounce(() => console.log("Hello!"), 1000)
return (
<>
Say hello with delay
Abort
Terminate
>
)
}
```
### [Timeout](https://github.com/soywod/react-captain/tree/master/src/timeout)
A wrapper around `setTimeout`.
```typescript
import {useTimeout} from "react-captain"
function Component() {
const handler = useTimeout(() => console.log("Hello!"), 1000)
return (
<>
Say hello with delay
Abort
Terminate
>
)
}
```
### [Interval](https://github.com/soywod/react-captain/tree/master/src/interval)
A wrapper around `setInterval`, using [toggle](#toggle).
```typescript
import {useInterval} from "react-captain"
function Component() {
const [isOn, toggle] = useInterval(() => console.log("Hello!"))
return (
{isOn ? "Stop" : "Say hello"}
)
}
```
### [Stored state](https://github.com/soywod/react-captain/tree/master/src/stored-state)
A persistant useState, based on React's `useState` and
[localForage](https://github.com/localForage/localForage). Drivers supported:
localStorage, WebSQL and IndexedDB.
```typescript
import {useStoredState} from "react-captain"
function Component() {
const [value, setValue] = useStoredState("storage-key", "Default value")
return (
setValue("Value changed!")}>
{String(value)}
)
}
```
### [Toggle](https://github.com/soywod/react-captain/tree/master/src/toggle)
A `useState` for booleans.
```typescript
import {useToggle} from "react-captain"
const Component: FC = () => {
const [isOn, toggle] = useToggle(false)
return (
Switch status: {isOn ? "ON" : "OFF"}
toggle(false)}>
Reset toggle
)
}
```
### [Subject](https://github.com/soywod/react-captain/tree/master/src/subject)
A wrapper around
[`rxjs.Subject`](https://www.learnrxjs.io/learn-rxjs/subjects/subject).
```typescript
import {useSubject} from "react-captain"
import {Subject} from "rxjs"
const subject$ = new Subject()
const Component: FC = () => {
const [counter, setCounter] = useState(0)
useSubject(subject$, setCounter)
return subject$(counter + 1)}>{counter}
}
```
### [Behavior subject](https://github.com/soywod/react-captain/tree/master/src/behavior-subject)
A wrapper around
[`rxjs.BehaviorSubject`](https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject).
```typescript
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 setCounter(counter + 1)}>{counter}
}
```
## Development
```bash
git clone https://github.com/soywod/react-captain.git
cd react-captain
yarn install
```
To start the development server:
```bash
yarn start
```
To build the lib:
```bash
yarn build
```
To build the demo:
```bash
yarn build:demo
```
## Tests
### Unit tests
Unit tests are handled by [Jest](https://jestjs.io) (`.test` files) and [React
Testing Library](https://testing-library.com/docs/react-testing-library/intro)
(`.spec` files).
```bash
yarn test:unit
```
### End-to-end tests
End-to-end tests are handled by [Cypress](https://www.cypress.io) (`.e2e`
files).
```bash
yarn start
yarn test:e2e
```
## Changelog
See [CHANGELOG.md](https://github.com/soywod/react-captain/blob/master/CHANGELOG.md).
## License
[MIT](https://github.com/soywod/react-captain/blob/master/LICENSE) -
Copyright © 2019-2020 soywod.