How to use the aphrodite.StyleSheet.rehydrate function in aphrodite

To help you get started, we’ve selected a few aphrodite 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 jaredpalmer / razzle / client / index.js View on Github external
import Router from 'react-router/lib/Router'
import match from 'react-router/lib/match'
import browserHistory from 'react-router/lib/browserHistory'
import { Provider } from 'react-redux'
import { StyleSheet } from 'aphrodite'
import { fromJS } from 'immutable'

import { configureStore } from '../common/store'
const initialState = window.INITIAL_STATE || {}
// Set up Redux (note: this API requires redux@>=3.1.0):
const store = configureStore(fromJS(initialState))
const { dispatch } = store

const container = document.getElementById('root')

StyleSheet.rehydrate(window.renderedClassNames)

const render = () => {
  const { pathname, search, hash } = window.location
  const location = `${pathname}${search}${hash}`

  // We need to have a root route for HMR to work.
  const createRoutes = require('../common/routes/root').default
  const routes = createRoutes(store)

  // Pull child routes using match. Adjust Router for vanilla webpack HMR,
  // in development using a new key every time there is an edit.
  match({ routes, location }, () => {
    // Render app with Redux and router context to container element.
    // We need to have a random in development because of `match`'s dependency on
    // `routes.` Normally, we would want just one file from which we require `routes` from.
    ReactDOM.render(
github zeit / next.js / examples / with-aphrodite / pages / index.js View on Github external
import React from 'react'
import { StyleSheet, css } from 'aphrodite'

if (typeof window !== 'undefined') {
  /* StyleSheet.rehydrate takes an array of rendered classnames,
  and ensures that the client side render doesn't generate
  duplicate style definitions in the 
github jaredpalmer / razzle / client / index.js View on Github external
import ReactDOM from 'react-dom'
import Router from 'react-router/lib/Router'
import match from 'react-router/lib/match'
import browserHistory from 'react-router/lib/browserHistory'
import { Provider } from 'react-redux'
import { StyleSheet } from 'aphrodite'

import { configureStore } from '../common/store'
const initialState = window.INITIAL_STATE || {}
// Set up Redux (note: this API requires redux@>=3.1.0):
const store = configureStore(initialState)
const { dispatch } = store

const container = document.getElementById('root')

StyleSheet.rehydrate(window.renderedClassNames)

const render = () => {
  const { pathname, search, hash } = window.location
  const location = `${pathname}${search}${hash}`

  // We need to have a root route for HMR to work.
  const createRoutes = require('../common/routes/root').default
  const routes = createRoutes(store)

  // Pull child routes using match. Adjust Router for vanilla webpack HMR,
  // in development using a new key every time there is an edit.
  match({ routes, location }, () => {
    // Render app with Redux and router context to container element.
    // We need to have a random in development because of `match`'s dependency on
    // `routes.` Normally, we would want just one file from which we require `routes` from.
    ReactDOM.render(
github DefinitelyTyped / DefinitelyTyped / aphrodite / aphrodite-tests.tsx View on Github external
<span>
                With font
            </span>
        ;
    }
}

const output = StyleSheetServer.renderStatic(() =&gt; {
    return "test";
});

output.css.content;
output.css.renderedClassNames;
output.html;

StyleSheet.rehydrate(output.css.renderedClassNames);

StyleSheetTestUtils.suppressStyleInjection();
StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
github josephg / react-static-example / client.js View on Github external
import { Provider } from 'react-redux'

import { routesWithStore } from './app';

import {StyleSheet} from 'aphrodite';

const reducers = require('./reducers');

const store = createStore(reducers, window.__INITIAL_STATE__);
const routes = routesWithStore(store);

const onError = function(err) {
  console.error(err);
};

StyleSheet.rehydrate(window.__CSS_NAMES__);
match({history:browserHistory, routes}, (err, redirect, props) =&gt; {
  ReactDOM.render(
    
      
    ,
    document.getElementById('app')
  );
});
github TrueCar / gluestick / packages / gluestick-plugin-aphrodite / src / runtime.js View on Github external
const plugin = () => {
  StyleSheet.rehydrate(window.renderedClassNames);
};
const meta = { hook: true };
github alloy / relational-theory / app / containers / react-aphrodite / artist / browser.js View on Github external
import React from 'react'
import ReactDOM from 'react-dom'
import IsomorphicRelay from 'isomorphic-relay'

import { StyleSheet } from 'aphrodite'

import { artsyRelayEnvironment } from '../../../relay/config'
import { ArtistQueryConfig } from '../../../relay/root_queries'

import Artist from './index'

StyleSheet.rehydrate(window.STYLE_SHEET)

const rootElement = document.getElementById('root')

const environment = artsyRelayEnvironment()
IsomorphicRelay.injectPreparedData(environment, window.ARTIST_PROPS)

IsomorphicRelay.prepareInitialRender({
  Container: Artist,
  queryConfig: new ArtistQueryConfig({ artistID: window.ARTIST_ID }),
  environment,
}).then(props =&gt; {
  ReactDOM.render(, rootElement)
})
github saikat / react-apollo-starter-kit / src / client / index.jsx View on Github external
import { Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import { StyleSheet } from 'aphrodite'
import errorCatcher from './error-catcher'
import routes from '../routes'
import Store from '../store'
import { ApolloProvider } from 'react-apollo'
import ApolloClientSingleton from '../network/apollo-client-singleton'

window.onerror = (msg, file, line, col, error) =&gt; { errorCatcher(error) }
window.addEventListener('unhandledrejection', (event) =&gt; { errorCatcher(event.reason) })

const store = new Store(browserHistory, window.INITIAL_STATE)
const history = syncHistoryWithStore(browserHistory, store.data)

StyleSheet.rehydrate(window.RENDERED_CLASS_NAMES)

ReactDOM.render(
  
    
  ,
  document.getElementById('mount')
)
github patternfly / patternfly-react / packages / react-styles / src / inject.js View on Github external
export function rehydrate([renderedClassNames]) {
  StyleSheet.rehydrate(renderedClassNames);
}
github watson-developer-cloud / natural-language-understanding-nodejs / public / scripts / bundle.jsx View on Github external
import './polyfills';
import React from 'react';
import ReactDOM from 'react-dom';
import { StyleSheet } from 'aphrodite';
import Demo from '../../views/Demo.jsx';
import { css } from '../../views/index.jsx';


StyleSheet.rehydrate(css.renderedClassNames);
ReactDOM.render(, document.getElementById('root'));