Gathering detailed insights and metrics for react-extras
Gathering detailed insights and metrics for react-extras
Installations
npm install react-extrasDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
^12.20.0 || ^14.13.1 || >=16.0.0
Node Version
16.20.0
NPM Version
9.2.0
Releases
7
Languages
2
JavaScript
TypeScript
JavaScript (81.79%)
TypeScript (18.21%)
Developer
sindresorhus
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
722 Stars
57 Commits
39 Forks
10 Watchers
1 Branches
12 Contributors
Updated on Mar 19, 2025
Sponsor this package
Maintainers
1
Package Meta Information
Latest Version
3.0.1
Package Id
react-extras@3.0.1
Unpacked Size
22.71 kB
Size
6.52 kB
File Count
14
NPM Version
9.2.0
Node Version
16.20.0
Published on
Jun 07, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
react-extras
Useful components and utilities for working with React
Install
1npm install react-extras
Usage
1import React from 'react'; 2import {If} from 'react-extras'; 3 4const App = props => ( 5 <If condition={props.showUnicorn}> 6 <div className="unicorn"> 7 🦄 8 </div> 9 </If> 10);
API
autoBind(self, options?)
Automatically binds your React.Component subclass methods to the instance. See the autoBind.react() docs.
classNames(…input)
Conditionally join CSS class names together.
input
Type: string | object
Accepts a combination of strings and objects. Only object keys with truthy values are included. Anything else is ignored.
1import {classNames} from 'react-extras';
2
3classNames('unicorn', 'rainbow');
4//=> 'unicorn rainbow'
5
6classNames({awesome: true, foo: false}, 'unicorn', {rainbow: false});
7//=> 'awesome unicorn'
8
9classNames('unicorn', null, undefined, 0, 1, {foo: null});
10//=> 'unicorn'
11
12const buttonType = 'main';
13classNames({[`button-${buttonType}`]: true});
14//=> 'button-main'1import {classNames} from 'react-extras'; 2 3const Button = props => { 4 console.log(props); 5 /* 6 { 7 type: 'success', 8 small: true 9 } 10 */ 11 12 const buttonClass = classNames( 13 'button', 14 { 15 [`button-${props.type}`]: props.type, 16 'button-block': props.block, 17 'button-small': props.small 18 } 19 ); 20 21 console.log(buttonClass); 22 //=> 'button button-success button-small' 23 24 return <button className={buttonClass}>…</button>; 25};
<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:
1import {If} from 'react-extras'; 2 3<div> 4 <If condition={props.error} render={() => ( 5 <h1>{props.error}</h1> 6 )}/> 7</div>
Or you could just use plain JavaScript:
1<div> 2 {props.error && ( 3 <h1>{props.error}</h1> 4 )} 5</div>
<Choose>
React component similar to a switch case. <Choose> has 2 children components:
<Choose.When>that renders the children if theconditionprop istrue.<Choose.Otherwise>that renders the children if has no<Choose.When>withtruepropcondition.
Note that even when the children are not rendered, they're still evaluated.
1import {Choose} from 'react-extras'; 2 3<div> 4 <Choose> 5 <Choose.When condition={props.success}> 6 <h1>{props.success}</h1> 7 </Choose.When> 8 <Choose.When condition={props.error}> 9 <h1>{props.error}</h1> 10 </Choose.When> 11 <Choose.Otherwise> 12 <h1>😎</h1> 13 </Choose.Otherwise> 14 </Choose> 15</div>
Or you could just use plain JavaScript:
1<div> 2 {(() => { 3 if (props.success) { 4 return <h1>{props.success}</h1>; 5 } 6 7 if (props.error) { 8 return <h1>{props.error}</h1>; 9 } 10 11 return <h1>😎</h1>; 12 })()} 13</div>
<For/>
React component that iterates over the of prop and renders the render prop.
1import {For} from 'react-extras'; 2 3<div> 4 <For of={['🌈', '🦄', '😎']} render={(item, index) => 5 <button key={index}>{item}</button> 6 }/> 7</div>
Or you could just use plain JavaScript:
1<div> 2 {['🌈', '🦄', '😎'].map((item, index) => 3 <button key={index}>{item}</button> 4 )} 5</div>
<Image/>
React component that improves the <img> element.
It makes the image invisible if it fails to load instead of showing the default broken image icon. Optionally, specify a fallback image URL.
1import {Image} from 'react-extras'; 2 3<Image 4 url="https://sindresorhus.com/unicorn.jpg" 5 fallbackUrl="https://sindresorhus.com/rainbow.jpg" 6/>
It supports all the props that <img> supports, but you use the prop url instead of src.
<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.
1import {RootClass} from 'react-extras'; 2 3<If condition={props.isDarkMode}> 4 <RootClass add="dark-mode"/> 5</If>
1import {RootClass} from 'react-extras'; 2 3<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:
1.dark-mode body { 2 background: #000; 3} 4 5.dark-mode a { 6 … 7}
With <BodyClass/> you need to do:
1body.dark-mode { 2 background: #000; 3} 4 5.dark-mode a { 6 … 7}
isStatelessComponent(Component)
Returns a boolean of whether the given Component is a functional stateless component.
getDisplayName(Component)
Returns the display name of the given Component.
canUseDOM
A boolean of whether you're running in a context with a DOM. Can be used to check if your component is running in the browser or if it's being server-rendered.
Related
- react-router-util - Useful components and utilities for working with React Router
- sass-extras - Useful utilities for working with Sass
- class-names - Conditionally join CSS class names together
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: license:0
- Info: FSF or OSI recognized license: MIT License: license:0
Reason
0 existing vulnerabilities detected
Reason
Found 6/30 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/sindresorhus/react-extras/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/sindresorhus/react-extras/main.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/main.yml:22
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 6 are checked with a SAST tool
Score
3.6
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More