React-tackle NPM

React Tackle

A toolkit of React components

Timer

A simple timer render prop component

Example

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