🎣

useContext

April 17, 2020

react

On this page

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>

Edit this page