react-body-classname
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-body-classname package

1.3.1 • Public • Published

react-body-classname

NPM version Downloads Dependency status

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 className="helloworld">
    <h1>You ate a whole wheel of cheese?</h1>
  </BodyClassName>
);
// -> document.body.className === "helloworld"
 
const Nested = () => (
  <BodyClassName className="outside">
    <div>
      <BodyClassName className="inside">
        <p>I‘m not even mad</p>
      </BodyClassName>
    </div>
  </BodyClassName>
);
// -> document.body.className === "outside inside"
 
const GoCrazy = () => (
  <BodyClassName className={Array(8).join(''/0) + ' batman!'}>
    <h1>I'm 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.

/react-body-classname/

    Package Sidebar

    Install

    npm i react-body-classname

    Weekly Downloads

    6,835

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • iest
    • pactcoffee