React TimeProvider
React components for safely accessing the current time.
Install
NPM:
npm install --save react-timeprovider
Yarn:
yarn add react-timeprovider
Usage
import * as React from 'react'; import TimeProvider GetTime from 'react-timeprovider'; const WeekendStatus = currentTime // Because we take currentTime as a prop, we now no longer depend // on the external system time in our render function. We are now // a pure function const dayOfWeek = currentTime; const isWeekend = 0 6; if isWeekend return <p>It's the weekend!</p>; return <p>It is not the weekend :</p>;}; const App = <TimeProvider> <h1>Is it the weekend?</h1> <GetTime> currentTime <WeekendStatus = /></GetTime> </TimeProvider>); ;
Documentation
<TimeProvider>
Props:
interval
(number, default500
) - The number of milliseconds to wait before updating the time.
<GetTime>
Takes a function as children
and passes an object containing currentTime
to
that function.
withTime
A HOC that will pass the prop currentTime
to the wrapped component.
useTime
A Hook that will give you access to the currentTime
.
import useTime from 'react-timeprovider'; const MyComponent = const currentTime = ; // do something;
createTimeProvider(getTime)
If you are writing tests and want to mock out the getTime
function or if you
don't like the default time representation you can create your own
<TimeProvider>
component.
const MockTimeProvider = ;
The getTime
function will be passed any extra props that you set onto
<TimeProvider>
. This is useful if you want the time zone for example.
License
MIT © Everwise