All files / components/Mode ModeProvider.js

80% Statements 8/10
33.33% Branches 1/3
50% Functions 2/4
88.89% Lines 8/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34          20x         20x 43x 43x       43x 43x           43x             20x      
import React, { useCallback, useMemo, useState } from 'react';
import { oneOf, node } from 'prop-types';
import { ThemeProvider } from 'styled-components';
import ModeContext from './ModeContext';
 
const propTypes = {
  initialMode: oneOf(['light', 'dark']),
  children: node.isRequired,
};
 
const ModeProvider = ({ initialMode = 'light', children }) => {
  const [mode, setMode] = useState(initialMode);
  const toggleMode = useCallback(
    () => setMode(prevMode => (prevMode === 'light' ? 'dark' : 'light')),
    []
  );
  const value = useMemo(
    () => ({
      mode,
      toggleMode,
    }),
    [mode, toggleMode]
  );
  return (
    <ModeContext.Provider value={value}>
      <ThemeProvider theme={{ mode }}>{children}</ThemeProvider>
    </ModeContext.Provider>
  );
};
 
ModeProvider.propTypes = propTypes;
 
export default ModeProvider;