React Html ClassName
Provides a declarative way to specify document.getElementsByTagName("html")[0].className
in a single-page app.
This component can be used on server side as well.
Built with React Side Effect.
====================
Installation
npm install --save react-html-classname
Dependencies: React >= 0.13.0
Features
- Does not emit DOM, not even a
<noscript>
; - Like a normal React compoment, can use its parent's
props
andstate
; - Can be defined in many places throughout the application;
- Supports arbitrary levels of nesting, combining each className;
- Works just as well with isomorphic apps.
Example
{ // This will add 'home' to the html return <HtmlClassName ='home'> <h1>Home sweet home</h1> </HtmlClassName> ; } { // This will add 'app' to the html return <HtmlClassName ='app'> <SomeComponent/> </HtmlClassName> ; // Becaase we nested the component, our html will now have 'app home' // as the class name }
Use CSS modules with webpack or similar?
import styles from './some.css'; { return <HtmlClassName => <h1>CSS modules rock!</h1> </HtmlClassName> ; }
Server Usage
If you use it on server, call HtmlClassName.rewind()
after rendering components to string to retrieve the combined class name. You can then embed this className into HTML page template.
Because this component keeps track of mounted instances, you have to make sure to call rewind
on server, or you'll get a memory leak.