/
🎣

useContext

react
Table of contents
  • Setup
  • Usage
  • Docs: reactjs.org/docs/ho...nce.html
  • TS/React docs: github.com/typescri...eatsheet

Setup

This example uses the use-timer hook to create a provider that passes a timer and it's methods to any consumers.

tsx
import React, { createContext } from 'react'
import { useTimer } from 'use-timer'
export interface TimerContextInterface {
time: string
start: () => void
pause: () => void
reset: () => void
isRunning: boolean
}
export const TimerContext = createContext<TimerContextInterface>({
time: '',
start: () => {},
pause: () => {},
reset: () => {},
isRunning: false,
})
export const TimerProvider = ({ children }) => {
const { time, start, pause, reset, isRunning } = useTimer({
initialTime: 5000,
timerType: 'DECREMENTAL',
step: 1000,
},
})
return (
<TimerContext.Provider value={{ time, start, pause, reset, isRunning }}>
{children({ time, start, pause, reset, isRunning })}
</TimerContext.Provider>
)
}

Usage

tsx
import React, { useContext } from 'react'
const MyComponent = () => {
const { time } = useContext(TimerContext)
return <div>Timer expires in {time}</div>
}
tsx
<TimerProvider>
<MyComponent />
</TimerProvider>
// or
<TimerProvider>
{({time})=> (
<div>Timer expires in {time}</div>
)}
</TimerProvider>
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.