react-body-classname
Provides a declarative way to specify document.body.className
in your react app. Supports server-side usage too.
Built with React Side Effect.
Install
yarn add react-body-classname
Dependencies: React >= 0.13.0
What it looks like
import BodyClassName from 'react-body-classname'; const Basic = <BodyClassName ="helloworld"> <h1>You ate a whole wheel of cheese?</h1> </BodyClassName>);// -> document.body.className === "helloworld" const Nested = <BodyClassName ="outside"> <div> <BodyClassName ="inside"> <p>I‘m not even mad</p> </BodyClassName> </div> </BodyClassName>;// -> document.body.className === "outside inside" const GoCrazy = <BodyClassName => <h1> impressed</h1> </BodyClassName>;// -> document.body.className === "NaNNaNNaNNaNNaNNaNNaN batman!"
Note: Only supports a single child as props.
Server Usage
When using server-side, use BodyClassName.rewind()
after rendering components to string to retrieve the combined class name. Then chuck that into your HTML template.
Important: This component keeps track of mounted instances, so if you don't call BodyClassName.rewind()
you'll get a memory leak.