How to use the react-jss.SheetsRegistry function in react-jss

To help you get started, we’ve selected a few react-jss examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github lotas / contentful-graph-web / styles / getContext.js View on Github external
function createContext() {
  return {
    jss,
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
  };
}
github kulakowka / isomorphic-react / src / server / handleRequest.js View on Github external
export default function handleRequest (req, res, next) {
  const context = {}

  const sheets = new SheetsRegistry()

  // inside a request
  const promises = []
  // use `some` to imitate `
github daixianceng / react-universal-example / src / server.js View on Github external
const route = await router.resolve(context);

    if (route.redirect) {
      res.redirect(route.status || 302, route.redirect);
      return;
    }

    const data = { ...route };

    // Creates JSS with default presets
    // https://github.com/cssinjs/jss-preset-default
    const jss = createJss(jssPreset());
    // JSS Server side rendering
    // https://github.com/cssinjs/react-jss#server-side-rendering
    const sheets = new SheetsRegistry();
    const sheetsManager = new Map();
    const theme = getTheme(req.cookies.get('theme'));
    const rootComponent = props => (
      
        
          {route.component}
        
      
    );
    await getDataFromTree(rootComponent({ disableStylesGeneration: true }));
    // this is here because of Apollo redux APOLLO_QUERY_STOP action
    await Promise.delay(0);
    data.children = await ReactDOM.renderToString(rootComponent());
    data.styles = [
      { id: 'css', cssText: [...css].join('') },
      { id: 'jss', cssText: sheets.toString() },
github mui-org / material-ui / packages / material-ui-benchmark / src / styles.js View on Github external
.add('JSS naked', () => {
    const sheetsRegistry = new SheetsRegistry();

    const staticStyles = cssObject;
    const dynamicStyles = getDynamicStyles(staticStyles);

    const staticSheet = jss.createStyleSheet(staticStyles);
    staticSheet.attach({
      link: false,
    });
    sheetsRegistry.add(staticSheet);

    if (dynamicStyles) {
      const dynamicSheet = jss.createStyleSheet(dynamicStyles, {
        link: true,
      });
      dynamicSheet.update({}).attach();
      sheetsRegistry.add(dynamicSheet);
github verekia / js-stack-boilerplate / src / server / render-app.jsx View on Github external
const renderApp = (location: string, plainPartialState: ?Object, routerContext: ?Object = {}) => {
  const store = initStore(plainPartialState)
  const sheets = new SheetsRegistry()
  const appHtml = ReactDOMServer.renderToString(
    
      
        
          
        
      
    )
  const head = Helmet.rewind()

  return (
    `
    
      
        
        ${head.title}
github lttb / postjss / examples / counter / src / server / index.js View on Github external
const handleRender = ({ query, params }, res) => {
  const { counter } = query

  const store = createStore(rootReducer, { counter: Number(counter) || 0 })
  const sheets = new SheetsRegistry()

  const html = renderToString(
    
      
        
      
    ,
  )

  res.send(renderFullPage({
    html,
    state: store.getState(),
    sheets: sheets.toString(),
  }))
}
github gatsbyjs / gatsby / packages / gatsby-plugin-jss / src / gatsby-ssr.js View on Github external
exports.wrapRootElement = ({ element, pathname }, { theme = {} }) => {
  const sheets = new SheetsRegistry()
  sheetsRegistryManager.set(pathname, sheets)

  return (
    
      {element}
    
  )
}
github mui-org / material-ui / packages / material-ui-benchmark / src / styles.js View on Github external
.add('JSSButton', () => {
    const sheetsRegistry = new SheetsRegistry();
    ReactDOMServer.renderToString(
      
        
          {Array.from(new Array(5)).map((_, index) => (
            Material-UI
          ))}
        
      ,
    );
    sheetsRegistry.toString();
  })
  .add('WithStylesButton', () => {
github builderbook / builderbook / lib / context.js View on Github external
function createPageContext() {
  return {
    theme,
    sheetsManager: new Map(),
    sheetsRegistry: new SheetsRegistry(),
    generateClassName: createGenerateClassName(),
  };
}
github alloy / relational-theory / app / routes.tsx View on Github external
}, res.locals.networkLayer).then(({ data, props }) => {
    const sheets = new SheetsRegistry()
    const html = ReactDOMServer.renderToString(
      
        )
      
    )
    res.send(`
      
      
        <style type="text/css">${sheets.toString()}</style>