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 68x 68x 215x 215x 215x 215x 68x 68x | import React, { useMemo, memo } from 'react'; import { object } from 'prop-types'; import { ThemeProvider } from 'styled-components'; import { useMode } from '../components/Mode'; const createProvider = (key, defaultTheme) => { const propTypes = { theme: object, darkTheme: object, }; const Provider = ({ theme = defaultTheme, darkTheme, ...rest }) => { const modeContext = useMode(); const memoizedTheme = useMemo( () => ({ [key]: { ...theme, ...(modeContext && modeContext.mode === 'dark' && darkTheme ? darkTheme : {}), }, }), [darkTheme, modeContext, theme] ); return <ThemeProvider theme={memoizedTheme} {...rest} />; }; Provider.propTypes = propTypes; return memo(Provider); }; export default createProvider; |