How to use the aphrodite/no-important.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 LWJGL / lwjgl3-www / client / main.js View on Github external
import nprogress from 'nprogress'

import configureStore from './store/configureStore'
import App from './containers/App'
import './services/ga'
import preserver from './routes/Preserver'

// Hide spinner from nprogress
nprogress.configure({
  showSpinner: false
});

// Re-hydrate Aphrodite from server-generated class names
const rehydrateFrom = document.getElementById('aphro-hydrate');
if ( rehydrateFrom ) {
  StyleSheet.rehydrate(JSON.parse(rehydrateFrom.innerHTML));
}

// Re-hydrate routes HTML
const routesRootEl = document.getElementById('lwjgl-routes');
if ( routesRootEl && process.env.NODE_ENV === 'production' ) {
  preserver.store(routesRootEl.innerHTML);
}

// Configure Redux store
const store = configureStore();

// Render React
const rootEl = document.getElementById('lwjgl-app');

if ( process.env.NODE_ENV === 'production' ) {
  render(, rootEl);
github phenomic / phenomic / examples / react-app-styles-with-aphrodite / App.js View on Github external
// @flow

import * as React from "react";
import { Router, Route, browserHistory } from "react-router";
import { createApp } from "@phenomic/preset-react-app/lib/client";
import { StyleSheet, css } from "aphrodite/no-important";

if (typeof window !== "undefined" && window._aphrodite) {
  StyleSheet.rehydrate(window._aphrodite);
}

const styles = StyleSheet.create({
  title: {
    fontSize: "1.5em",
    textAlign: "center",
    color: "palevioletred",
  },
  title2: {
    fontSize: "2em",
    textAlign: "right",
    color: "blue",
  },
});

export default createApp(() => (
github LWJGL / lwjgl3-www / client / main.dev.js View on Github external
import nprogress from 'nprogress'
import {calculateResponsiveState} from 'redux-responsive'

import configureStore from './store/configureStore'
import App from './containers/App'
import './utils/ga'

// Hide spinner from nprogress
nprogress.configure({
  showSpinner: false
});

// Re-hydrate Aphrodite from server-generated class names
const rehydrateFrom = document.getElementById('aphro-hydrate');
if ( rehydrateFrom ) {
  StyleSheet.rehydrate(JSON.parse(rehydrateFrom.innerHTML));
}

// Configure Redux store
const store = configureStore();
store.dispatch(calculateResponsiveState(window));

// Render React
const rootEl = document.getElementById('lwjgl-app');
render((
  
    
  
), rootEl);

// Hot Reloading
if ( module.hot ) {