react-extras
Advanced tools
Useful components and utilities for working with React
$ npm install react-extras
import React from 'react';
import {If} from 'react-extras';
const App = props => (
<If condition={props.showUnicorn}>
<div className="unicorn">
🦄
</div>
</If>
);
Automatically binds your React.Component subclass methods to the instance. See the autoBind.react() docs.
<If>React component that renders the children if the condition prop is true.
Beware that even though the children are not rendered when the condition is false, they're still evaluated.
If you need it to not be evaluated on false, you can pass a function to the render prop that returns the children:
<div>
<If condition={props.error} render={() => (
<h1>{props.error}</h1>
)}/>
</div>
Or you could just use plain JavaScript:
<div>
{props.error && (
<h1>{props.error}</h1>
)}
</div>
<RootClass/>Renderless React component that can add and remove classes to the root <html> element. It accepts an add prop for adding classes, and a remove prop for removing classes. Both accept either a single class or multiple classes separated by space.
<If condition={props.isDarkMode}>
<RootClass add="dark-mode"/>
</If>
<RootClass add="logged-in paid-user" remove="promo"/>
<BodyClass/>Same as <RootClass/> but for <body>.
Prefer <RootClass/> though, because it's nicer to put global classes on <html> as you can consistently prefix everything with the class:
.dark-mode body {
background: #000;
}
.dark-mode a {
…
}
With <BodyClass/> you need to do:
body.dark-mode {
background: #000;
}
.dark-mode a {
…
}
MIT © Sindre Sorhus
FAQs
Useful components and utilities for working with React
The npm package react-extras receives a total of 1,126 weekly downloads. As such, react-extras popularity was classified as popular.
We found that react-extras demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.