Async Loading CSS file in our React Application. Of course we can use in Isomorphic Application!
$ npm install react-css-context -S
import * as React from 'react';
import { CSSCollector } from 'react-css-context';
export class SomeComponent extends React.Component {
return (
<CSSCollector hrefs={["absolute/url/of/css"]}>
<div>display after css loaded.</div>
</CSSCollector>
);
}href must be absolute url
- NG:
/path/to/some.css - OK:
https://ryotasugawara.github.io/absolute/url.css
import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';
import { CSSProvider, toTagString, toTagComponent } from 'react-css-context';
const cssMap = new Map();
const renderOutput = ReactDOMServer.renderToString(
<CSSProvider cssMap={cssMap}>
<App>
<SomeComponent />
</App>
</CSSProvider>
);
// use string
const htmlOutput = `
<html>
<head>
${toTagString(cssMap)}
</head>
...
</html>
`;
// use component
const htmlOutput = renderToString(
<html>
<head>
{toTagComponent(cssMap)}
</head>
...
</html>
);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { CSSProvider, getCSSMap } from 'react-css-context';
// get CSS-Map from browser head.
const cssMap = getCSSMap();
ReactDOM.render(
<CSSProvider cssMap={cssMap}>
<App>
<SomeComponent />
</App>
</CSSProvider>,
document.getElementById('main')
);