https://github.com/ryotasugawara/react-css-context
Isomorphic-loading CSS in our React Application.
https://github.com/ryotasugawara/react-css-context
css isomorphic javascript react typescript universal-javascript universal-react
Last synced: 2 months ago
JSON representation
Isomorphic-loading CSS in our React Application.
- Host: GitHub
- URL: https://github.com/ryotasugawara/react-css-context
- Owner: RyotaSugawara
- License: mit
- Created: 2018-07-27T06:40:08.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-11T06:18:50.000Z (almost 6 years ago)
- Last Synced: 2025-03-26T15:42:14.247Z (3 months ago)
- Topics: css, isomorphic, javascript, react, typescript, universal-javascript, universal-react
- Language: TypeScript
- Size: 322 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-css-context
Async Loading CSS file in our React Application.
Of course we can use in Isomorphic Application!
## Install
```
$ npm install react-css-context -S
```
## Usage
### At Component where you want to load css.
```tsx
import * as React from 'react';
import { CSSCollector } from 'react-css-context';
export class SomeComponent extends React.Component {
return (
display after css loaded.
);
}
```
**`href` must be absolute url**
- NG: `/path/to/some.css`
- OK: `https://ryotasugawara.github.io/absolute/url.css`
### Server Side Rendering
```tsx
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(
);
// use string
const htmlOutput = `
${toTagString(cssMap)}
...
`;
// use component
const htmlOutput = renderToString(
{toTagComponent(cssMap)}
...
);
```
### Client Side Rendering
```tsx
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(
,
document.getElementById('main')
);
```