@dash-ui/react
Version:
React components and hooks for dash-ui
115 lines (103 loc) • 2.94 kB
JavaScript
import { styles } from '@dash-ui/styles';
import { createStylesFromString } from '@dash-ui/styles/server';
export * from '@dash-ui/styles/server';
import * as React from 'react';
/* eslint-disable @typescript-eslint/no-var-requires */
/**
* 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;
function toComponent(html, styles$1, options) {
var _options$nonce;
if (styles$1 === void 0) {
styles$1 = styles;
}
if (options === void 0) {
options = {};
}
var {
dash
} = styles$1;
var {
names,
css
} = createStylesFromString(html, styles$1);
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}/>
* </>
* ),
* }
* }
* }
*/
function Style(_ref) {
var {
html,
styles,
nonce
} = _ref;
return toComponent(html, styles, {
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()
*/
function createGatsbyRenderer(styles$1) {
if (styles$1 === void 0) {
styles$1 = styles;
}
/* 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$1)]);
return props;
};
}
export { Style, createGatsbyRenderer, toComponent };
//# sourceMappingURL=index.dev.mjs.map