React Tackle

A toolkit of React components

Timer

A simple timer render prop component

Example

Check out a working example here

import { Timer } from 'react-tackle'

<Timer name="Timer 1">
      {({ time, getStartProps, getStopProps, getClearProps }) => (
        <div>
          <div>{time}</div>
          <button {...getStartProps()}>Start</button>
          <button {...getStopProps()}>Stop</button>
          <button {...getClearProps()}>Clear</button>
        </div>
      )}
    </Timer>

Props

name: string [required] - a unique name to identify the timer

child: (stateAndHelpers) => React.ReactNode - the child function which is detailed below

Child function

The child function will be called with an object containing the following properties:

time: number - the current count of the timer

getStartProps: a prop getter function which returns the props for the start button

getStopProps: a prop getter function which returns the props for the stop button

getClearProps: a prop getter function which returns the props for the clear button

Prop Getters

Prop getters is a pattern made popular by Kent C Dodds with Downshift

A prop getter is a function which takes a prop object as an argument. It composes the prop object with internal props and then returns the new prop object to be spread on the target element.

Intersection

A render prop that provides access to the IntersectionObserver API

Example

Check out a working example here

import { Intersection } from 'react-tackle'

 <Intersection threshold={[0.4, 0.6]}>
    {({ ref, inView }) => (
      <div ref={ref} style={style.wrapper({ background, inView })}>
        Hello!
      </div>
    )}
  </Intersection>

Props

threshold: array [optional] - an array of thresholds at which the intersection status will be updated. Defaults to 0.

child: (stateAndHelpers) => React.ReactNode - the child function which is detailed below

Child function

The child function will be called with an object containing the following properties:

ref: React.Ref - the ref to be applied to the target element

inView: boolean - boolean to indicate if the target is in view

Window

A render prop that provides access useful properties on the window API

Example

Check out a working example here

import { Window } from 'react-tackle'

<Window>
        {({ scrollY, scrollX, scrollYDirection, scrollXDirection }) => {
          return (
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                position: 'fixed',
              }}
            >
              <h1>Scroll</h1>
              <span>Scroll Y: {scrollY}</span>
              <span>Scroll X: {scrollX}</span>
              <span>Scroll Y Direction: {scrollYDirection}</span>
              <span>Scroll X Direction: {scrollXDirection}</span>
            </div>
          )
        }}
</Window>

Child function

The child function will be called with an object containing the following properties:

scrollX: number - the number of pixels scrolled on the X axis

scrollY: number - the number of pixels scrolled on the Y axis

scrollXDirection: string ["left", "right] - the scroll direction on the X axis

scrollYDirection: string ["up", "down] - the scroll direction on the Y axis

Fetch

A render prop that provides access to the the fetch API

Example

Check out a working example here

import { Fetch } from 'react-tackle'

    <h1>Fetch</h1>
    <h2>GET</h2>
    <Fetch execute url="https://jsonplaceholder.typicode.com/posts/1">
      {({ loading, error, data }) => {
        if (loading) return <div>Loading</div>
        if (error) return <div>Error{console.log(error)}</div>
        return <Post {...data} />
      }}
    </Fetch>
    <h2>POST</h2>
    <Fetch method="POST" url="https://jsonplaceholder.typicode.com/posts">
      {({ data, loading, error, execute }) => {
        if (loading) return <div>Loading</div>
        if (error) return <div>Error</div>
        return (
          <div>
            <PostForm onSubmit={args => execute(args)} />
            <Post {...data} />
          </div>
        )
      }}
    </Fetch>

Props

url: string [required] - the url to fetch

options: RequestInit [optional] - request options object, will over-write options provided by other props

body?: object [optional] - the request body

headers?: object [optional] - the request headers. Default for "GET" { "Accept": "application/json" } otherwise { "Content-Type": "application/json" }

method: string [optional] - defaults to "GET"

execute: boolean - if true the fetch will execute on mount, otherwise the execute function must be called

children: (state: State) => React.ReactNode - the child function detailed below

Child function

The child function will be called with an object containing the following properties:

data: any - the json body of the response

loading: boolean - the number of pixels scrolled on the Y axis

error: string - error from the request

execute: (body? : object) => void - a function when executes the request, can be called with the body of the request

CallOnMount

Simply calls a function onMount. Can be used as a render prop with child function which will be called with the result of the call prop.

Example

Props

call: function [required] - the function to call on mount

args: any [optional] - the arguments to call the function with

children: (state: State) => React.ReactNode - the child function detailed below

Child function

The child function will be called with an object containing the following properties:

data: any - the result of the call function