Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-extras

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-extras

Useful components and utilities for working with React

  • 3.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.7K
decreased by-9.1%
Maintainers
1
Weekly downloads
 
Created
Source

react-extras

Useful components and utilities for working with React

Install

npm install react-extras

Usage

import React from 'react';
import {If} from 'react-extras';

const App = props => (
	<If condition={props.showUnicorn}>
		<div className="unicorn">
			🦄
		</div>
	</If>
);

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.

import {classNames} from 'react-extras';

classNames('unicorn', 'rainbow');
//=> 'unicorn rainbow'

classNames({awesome: true, foo: false}, 'unicorn', {rainbow: false});
//=> 'awesome unicorn'

classNames('unicorn', null, undefined, 0, 1, {foo: null});
//=> 'unicorn'

const buttonType = 'main';
classNames({[`button-${buttonType}`]: true});
//=> 'button-main'
import {classNames} from 'react-extras';

const Button = props => {
	console.log(props);
	/*
	{
		type: 'success',
		small: true
	}
	*/

	const buttonClass = classNames(
		'button',
		{
			[`button-${props.type}`]: props.type,
			'button-block': props.block,
			'button-small': props.small
		}
	);

	console.log(buttonClass);
	//=> 'button button-success button-small'

	return <button className={buttonClass}></button>;
};

<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:

import {If} from 'react-extras';

<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>

<Choose>

React component similar to a switch case. <Choose> has 2 children components:

  • <Choose.When> that renders the children if the condition prop is true.
  • <Choose.Otherwise> that renders the children if has no <Choose.When> with true prop condition.

Note that even when the children are not rendered, they're still evaluated.

import {Choose} from 'react-extras';

<div>
	<Choose>
		<Choose.When condition={props.success}>
			<h1>{props.success}</h1>
		</Choose.When>
		<Choose.When condition={props.error}>
			<h1>{props.error}</h1>
		</Choose.When>
		<Choose.Otherwise>
			<h1>😎</h1>
		</Choose.Otherwise>
	</Choose>
</div>

Or you could just use plain JavaScript:

<div>
	{(() => {
		if (props.success) {
			return <h1>{props.success}</h1>;
		}

		if (props.error) {
			return <h1>{props.error}</h1>;
		}

		return <h1>😎</h1>;
	})()}
</div>

<For/>

React component that iterates over the of prop and renders the render prop.

import {For} from 'react-extras';

<div>
	<For of={['🌈', '🦄', '😎']} render={(item, index) =>
		<button key={index}>{item}</button>
	}/>
</div>

Or you could just use plain JavaScript:

<div>
	{['🌈', '🦄', '😎'].map((item, index) =>
		<button key={index}>{item}</button>
	)}
</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.

import {Image} from 'react-extras';

<Image
	url="https://sindresorhus.com/unicorn.jpg"
	fallbackUrl="https://sindresorhus.com/rainbow.jpg"
/>

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.

import {RootClass} from 'react-extras';

<If condition={props.isDarkMode}>
	<RootClass add="dark-mode"/>
</If>
import {RootClass} from 'react-extras';

<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 {
	…
}

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.

Keywords

FAQs

Package last updated on 07 Jun 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc