@dash-ui/react
Version:
React components and hooks for dash-ui
108 lines (97 loc) • 3.01 kB
JavaScript
/* eslint-disable @typescript-eslint/no-var-requires */
import { styles as defaultStyles } from "@dash-ui/styles";
import { createStylesFromString } from "@dash-ui/styles/server";
import * as React from "react";
/**
* A function for creating a React `<style>` component for
* inserting Dash styles in SSR.
*
* @param html - The HTML generated by `renderToStaticMarkup()` or `renderToString()`
* @param styles - An instance of `styles()`. Defaults to the default styles instance
* in `@dash-ui/styles`.
* @param options
* @param options.nonce
*/
var __reactCreateElement__ = React.createElement;
export function toComponent(html, styles, options) {
var _options$nonce;
if (styles === void 0) {
styles = defaultStyles;
}
if (options === void 0) {
options = {};
}
var _styles = styles,
dash = _styles.dash;
var _createStylesFromStri = createStylesFromString(html, styles),
names = _createStylesFromStri.names,
css = _createStylesFromStri.css;
return /*#__PURE__*/__reactCreateElement__("style", {
key: dash.key,
nonce: (_options$nonce = options.nonce) !== null && _options$nonce !== void 0 ? _options$nonce : dash.sheet.nonce ? dash.sheet.nonce : void 0,
"data-dash": names.join(" "),
"data-cache": dash.key,
dangerouslySetInnerHTML: {
__html: css
}
});
}
/**
* A React component for injecting SSR CSS styles into Next.js documents
*
* @param root0
* @param root0.html
* @param root0.styles
* @param root0.nonce
* @example
* // _document.js
* import React from 'react'
* import Document from 'next/document'
* import {Style} from '＠dash-ui/react/server'
*
* export default class MyDocument extends Document {
* static async getInitialProps(ctx) {
* const initialProps = await Document.getInitialProps(ctx)
* return {
* ...initialProps,
* styles: (
* <>
* {initialProps.styles}
* <Style html={initialProps.html}/>
* </>
* ),
* }
* }
* }
*/
export function Style(_ref) {
var html = _ref.html,
styles = _ref.styles,
nonce = _ref.nonce;
return toComponent(html, styles, {
nonce: nonce
});
}
/**
* Creates a Gatsby replaceRenderer for injecting styles generated by Dash on
* the server into the Gatsby `<head>` component
*
* @param styles - An instance of `styles()`. Defaults to the default styles instance
* in `@dash-ui/styles`.
* @example
* // gatsby-ssr.js
* exports.replaceRenderer = require('＠dash-ui/react/server').createGatsbyRenderer()
*/
export function createGatsbyRenderer(styles) {
if (styles === void 0) {
styles = defaultStyles;
}
/* istanbul ignore next */
return function replaceRenderer(props) {
var bodyString = require("react-dom/server").renderToStaticMarkup( // @ts-expect-error
props.bodyComponent); // @ts-expect-error
props.setHeadComponents([toComponent(bodyString, styles)]);
return props;
};
}
export * from "@dash-ui/styles/server";