Skip to content
🎣React UX components for handling common interactions
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
test
.babelrc
.eslintrc.js
.gitignore Add initial jest tests Oct 29, 2018
LICENSE
README.md
doczrc.js
package.json
yarn.lock

README.md

Tackle Box 🎣

Collection of React user-experience hooks + containers for common interactions

PRs Welcome

Getting Started

yarn add @dawnlabs/tacklebox

Usage

useAsyncCallback

🎣 hook

Takes any function and gives you a loading and error state. Good for handling general asynchronous interactions.

import { useAsyncCallback } from '@dawnlabs/tacklebox'

function MyAsyncButton(props) {
  const [onClick, { loading, error, data }] = useAsyncCallback(props.onClick)

  return (
    <>
      {error && <span>{error}!</span>}
      <button onClick={onClick}>{loading ? 'Saving...' : 'Save'}</button>
      {data && <span>Success! {data}</span>}
    </>
  )
}

useKeyboardListener

🎣 hook

Pass it a keyboard key and a handler to automatically listen for keyboard clicks.

Example
import { useKeyboardListener } from '@dawnlabs/tacklebox'

function Modal(props) {
  useKeyboardListener('Escape', props.onClose)

  return <div>Hello World</div>
}

useTempValue

hook 🎣

Hook that gives you a temporary state value that you can either commit with submit or revert with reset.

Example
import { useTempValue } from '@dawnlabs/tacklebox'

function MyForm(props) {
  const initialName = props.name
  const { hasChanged, value, onInputChange, submit, reset } = useTempValue(initialName)

  return (
    <form onSubmit={e => e.preventDefault()}>
      <input value={value || ''} onChange={onInputChange} />
      <button disabled={!hasChanged} onClick={submit}>
        Submit
      </button>
      <button disabled={!hasChanged} onClick={reset}>
        Cancel
      </button>
    </form>
  )
}

useCopyTextHandler

hook 🎣

Creates an onClick handler that copies the text you pass in, and updates the copied field accordingly. Note: you must pass onClick to a <button> in order to copy the text.

Example
import { useCopyTextHandler } from '@dawnlabs/tacklebox'

const interval = 2 * 1000 // 2 seconds

function MyCopyButton() {
  const { onClick, copied } = useCopyTextHandler('https://github.com/dawnlabs/tacklebox', {
    interval
  })

  return <button onClick={onClick}>{copied ? 'COPIED!' : 'Copy URL'}</button>
}

useOnline

hook 🎣

Subscribes to whether the network is online or off

Example
import { useOnline } from '@dawnlabs/tacklebox'

function MyComponent() {
  const online = useOnline()
  return <span>You are {online ? 'online' : 'offline'}</span>
}

Modal

wrapper HOC component

Class controlled Modal component with click-away and ESC-key to close

Example
import {Modal} from '@dawnlabs/tacklebox'

<Modal open={this.state.open} onClickAway={() => this.setState({ open: false})}>
  <form>
    <input placeholder="Enter name here . . ." />
  </form>
</>

License

MIT

You can’t perform that action at this time.