@ucam/design-system
Version:
University of Cambridge Design System
29 lines (26 loc) • 3.88 kB
JavaScript
import React, { useState } from 'react';
import { useHydrated, HydrationCheckerContext } from '../useHydrated/useHydrated.js';
import { unstable_useEnhancedEffect } from '@material-ui/core';
import PropTypes from 'prop-types';
/**
* A Component that tells children when the react hydration run has finished.
* This is required so that the hydration run matches the SSR.
* Children can retrieve the hydration status using the useHydrated hook.
* It is generally not required to use this component directly as it is included by `<ThemeProvider />`
*/
const HydrationChecker = ({ children }) => {
// undefined if this is the top level
const parentHydrated = useHydrated({ ignoreWarnings: true });
const [isSomewhatHydrated, setIsSomewhatHydrated] = useState(false);
unstable_useEnhancedEffect(() => {
setIsSomewhatHydrated(true);
}, []);
// hydration has finished when the top level is hydrated
const isHydrated = parentHydrated === undefined ? isSomewhatHydrated : parentHydrated;
return React.createElement(HydrationCheckerContext.Provider, { value: isHydrated }, children);
};
HydrationChecker.propTypes = {
children: PropTypes.node
};
export { HydrationChecker as default };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSHlkcmF0aW9uQ2hlY2tlci5qcyIsInNvdXJjZXMiOlsiL0B1Y2FtL2Rlc2lnbi1zeXN0ZW0vc3JjL0h5ZHJhdGlvbkNoZWNrZXIvSHlkcmF0aW9uQ2hlY2tlci50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZDLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB1c2VIeWRyYXRlZCBmcm9tICcuLi91c2VIeWRyYXRlZCc7XG5pbXBvcnQgeyBIeWRyYXRpb25DaGVja2VyQ29udGV4dCB9IGZyb20gJy4uL3VzZUh5ZHJhdGVkL3VzZUh5ZHJhdGVkJztcbmltcG9ydCB7IHVuc3RhYmxlX3VzZUVuaGFuY2VkRWZmZWN0IH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuLyoqXG4gKiBBIENvbXBvbmVudCB0aGF0IHRlbGxzIGNoaWxkcmVuIHdoZW4gdGhlIHJlYWN0IGh5ZHJhdGlvbiBydW4gaGFzIGZpbmlzaGVkLlxuICogVGhpcyBpcyByZXF1aXJlZCBzbyB0aGF0IHRoZSBoeWRyYXRpb24gcnVuIG1hdGNoZXMgdGhlIFNTUi5cbiAqIENoaWxkcmVuIGNhbiByZXRyaWV2ZSB0aGUgaHlkcmF0aW9uIHN0YXR1cyB1c2luZyB0aGUgdXNlSHlkcmF0ZWQgaG9vay5cbiAqIEl0IGlzIGdlbmVyYWxseSBub3QgcmVxdWlyZWQgdG8gdXNlIHRoaXMgY29tcG9uZW50IGRpcmVjdGx5IGFzIGl0IGlzIGluY2x1ZGVkIGJ5IGA8VGhlbWVQcm92aWRlciAvPmBcbiAqL1xuY29uc3QgSHlkcmF0aW9uQ2hlY2tlcjogRkMgPSAoeyBjaGlsZHJlbiB9KSA9PiB7XG4gIC8vIHVuZGVmaW5lZCBpZiB0aGlzIGlzIHRoZSB0b3AgbGV2ZWxcbiAgY29uc3QgcGFyZW50SHlkcmF0ZWQgPSB1c2VIeWRyYXRlZCh7IGlnbm9yZVdhcm5pbmdzOiB0cnVlIH0pO1xuXG4gIGNvbnN0IFtpc1NvbWV3aGF0SHlkcmF0ZWQsIHNldElzU29tZXdoYXRIeWRyYXRlZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIHVuc3RhYmxlX3VzZUVuaGFuY2VkRWZmZWN0KCgpID0+IHtcbiAgICBzZXRJc1NvbWV3aGF0SHlkcmF0ZWQodHJ1ZSk7XG4gIH0sIFtdKTtcblxuICAvLyBoeWRyYXRpb24gaGFzIGZpbmlzaGVkIHdoZW4gdGhlIHRvcCBsZXZlbCBpcyBoeWRyYXRlZFxuICBjb25zdCBpc0h5ZHJhdGVkID0gcGFyZW50SHlkcmF0ZWQgPT09IHVuZGVmaW5lZCA/IGlzU29tZXdoYXRIeWRyYXRlZCA6IHBhcmVudEh5ZHJhdGVkO1xuXG4gIHJldHVybiA8SHlkcmF0aW9uQ2hlY2tlckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2lzSHlkcmF0ZWR9PntjaGlsZHJlbn08L0h5ZHJhdGlvbkNoZWNrZXJDb250ZXh0LlByb3ZpZGVyPjtcbn07XG5cbkh5ZHJhdGlvbkNoZWNrZXIucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGVcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEh5ZHJhdGlvbkNoZWNrZXI7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFNQTs7Ozs7O01BTU0sZ0JBQWdCLEdBQU8sQ0FBQyxFQUFFLFFBQVEsRUFBRTs7SUFFeEMsTUFBTSxjQUFjLEdBQUcsV0FBVyxDQUFDLEVBQUUsY0FBYyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7SUFFN0QsTUFBTSxDQUFDLGtCQUFrQixFQUFFLHFCQUFxQixDQUFDLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BFLDBCQUEwQixDQUFDO1FBQ3pCLHFCQUFxQixDQUFDLElBQUksQ0FBQyxDQUFDO0tBQzdCLEVBQUUsRUFBRSxDQUFDLENBQUM7O0lBR1AsTUFBTSxVQUFVLEdBQUcsY0FBYyxLQUFLLFNBQVMsR0FBRyxrQkFBa0IsR0FBRyxjQUFjLENBQUM7SUFFdEYsT0FBTyxvQkFBQyx1QkFBdUIsQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLFVBQVUsSUFBRyxRQUFRLENBQW9DLENBQUM7QUFDNUcsRUFBRTtBQUVGLGdCQUFnQixDQUFDLFNBQVMsR0FBRztJQUMzQixRQUFRLEVBQUUsU0FBUyxDQUFDLElBQUk7Q0FDekI7Ozs7In0=