Tackle Box 🎣
Collection of React user-experience hooks + containers for common interactions
Getting Started
yarn add @dawnlabs/tackleboxUsage
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 HOCcomponent
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