🎣
useContext
- 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: stringstart: () => voidpause: () => voidreset: () => voidisRunning: 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>