11# react-stylesheet
22
3- A component for React to inject stylesheet links into document's head.
3+ A component for React to declare stylesheet dependencies for your reusable
4+ components.
45
56## Installation
67
78 % npm install react-stylsheets
89
910## Usage
1011
11- Use ` <Stylesheet /> ` component to declare stylesheets :
12+ Use ` <Stylesheet /> ` component to declare a stylesheet dependency :
1213
1314 var React = require('react');
1415 var Stylesheet = require('react-stylesheet');
15-
16+
1617 var App = React.createClass({
1718 render: function() {
1819 return (
@@ -38,6 +39,51 @@ Use `<Stylesheet />` component to declare stylesheets:
3839After rendering the component hierarchy, all declared stylesheets will be
3940inserted into document's head.
4041
42+ The idea is that you should be able to add stylesheets to the document even if
43+ your component don't render the ` <head> ` element.
44+
45+ ## Using with require-assets
46+
47+ If you are using [ require-assets] [ ] library to reference static assets from npm
48+ packages, you can pass a result of ` requireAssets(...) ` call directly to
49+ ` Stylesheet ` component:
50+
51+ var React = require('react');
52+ var Stylesheet = require('react-stylesheet');
53+ var requireAssets = require('require-assets');
54+
55+ var Button = React.createClass({
56+ render: function() {
57+ return (
58+ <a>
59+ <Stylesheet href={requireAssets('./index.css')}/>
60+ ...
61+ </a>
62+ );
63+ }
64+ });
65+
66+ [ require-assets ] : https://github.com/andreypopp/require-assets
67+
68+ ## Server-side rendering
69+
4170If you use fullpage rendering and prerender your UI on server with
4271` React.renderComponentToString(...) ` , then all the ` <link> ` tags will be
4372rendered inside the ` <head> ` tag.
73+
74+ ## Implementation notes
75+
76+ ** Garbage collection for stylesheets.** It is possible to extend
77+ ` react-stylesheet ` to allow to purge unused stylesheets. This can be done by
78+ storing a reference counter for each stylesheet. When such a counter hits 0, we
79+ can remove the corresponding stylesheet from the DOM. That could hit some edge
80+ cases where some small UI update can trigger a style recalc and reflow, to avoid
81+ that we can invent more advanced strategies to purge unused stylesheets, e.g.
82+ when number of CSS rules is above the threshold, do some time-ammortized purges
83+ and so on...
84+
85+ ** Stylesheet bundling.** It is easy to extend ` react-stylesheet ` to support
86+ bundled stylesheets. We just need to remap original CSS reference to a bundle
87+ reference. It doesn't matter if we bundle all stylesheet into one big bundle or
88+ split bundles per UI screens — this mechanism support both scenarious. This
89+ integrates smoothly with the garbage collection mechanism described above.
0 commit comments