React Tackle
A toolkit of React components
Timer
A simple timer render prop component
Example
Check out a working example here
<Timer name="Timer 1"> <div> <div>time</div> <button ...>Start</button> <button ...>Stop</button> <button ...>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
<Intersection threshold=04 06> <div ref=ref style=style> 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
<Window> { 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
<h1>Fetch</h1> <h2>GET</h2> <Fetch execute url="https://jsonplaceholder.typicode.com/posts/1"> { if loading return <div>Loading</div> if error return <div>Errorconsole</div> return <Post ...data /> } </Fetch> <h2>POST</h2> <Fetch method="POST" url="https://jsonplaceholder.typicode.com/posts"> { if loading return <div>Loading</div> if error return <div>Error</div> return <div> <PostForm onSubmit= /> <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