Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sindresorhus/react-extras

Useful components and utilities for working with React
https://github.com/sindresorhus/react-extras

npm-package react react-component react-utils

Last synced: 5 days ago
JSON representation

Useful components and utilities for working with React

Awesome Lists containing this project

README 

        
# react-extras



> Useful components and utilities for working with [React](https://reactjs.org)



## Install



```sh

npm install react-extras

```



## Usage



```js

import React from 'react';

import {If} from 'react-extras';



const App = props => (

	

		


			🦄

		


	

);

```



## API



### autoBind(self, options?)



Automatically binds your `React.Component` subclass methods to the instance. See the [`autoBind.react()` docs](https://github.com/sindresorhus/auto-bind#autobindreactself-options).



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



```js

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'

```



```jsx

import {classNames} from 'react-extras';



const Button = props => {

	console.log(props);

	/*

	{

		type: 'success',

		isBlock: false,

		isSmall: true

	}

	*/



	const buttonClass = classNames(

		'button',

		{

			[`button-${props.type}`]: Boolean(props.type),

			'button-block': props.isBlock,

			'button-small': props.isSmall

		}

	);



	console.log(buttonClass);

	//=> 'button button-success button-small'



	return …;

};

```



### ``



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:



```jsx

import {If} from 'react-extras';





	 (

		
{props.error}


	)}/>



```



Or you could just use plain JavaScript:



```jsx



	{props.error && (

		
{props.error}


	)}



```



### ``



React component similar to a switch case. `` has 2 children components:



- `` that renders the children if the `condition` prop is `true`.

- `` that renders the children if has no `` with `true` prop `condition`.



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



```jsx

import {Choose} from 'react-extras';





	

		

			
{props.success}


		

		

			
{props.error}


		

		

			
😎


		

	



```



Or you could just use plain JavaScript:



```js



	{(() => {

		if (props.success) {

			return 
{props.success}
;

		}



		if (props.error) {

			return 
{props.error}
;

		}



		return 
😎
;

	})()}



```



### ``



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



```jsx

import {For} from 'react-extras';





	

		{item}

	}/>



```



Or you could just use plain JavaScript:



```jsx



	{['🌈', '🦄', '😎'].map((item, index) =>

		{item}

	)}



```



### ``



React component that improves the `` 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.



```jsx

import {Image} from 'react-extras';



```



It supports all the props that `` supports, but you use the prop `url` instead of `src`.



### ``



Renderless React component that can add and remove classes to the root `` 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.



```jsx

import {RootClass} from 'react-extras';



	



```



```jsx

import {RootClass} from 'react-extras';



```



### ``



Same as `` but for ``.



Prefer `` though, because it's nicer to put global classes on `` as you can consistently prefix everything with the class:



```css

.dark-mode body {

	background: #000;

}



.dark-mode a {

	…

}

```



With `` you need to do:



```css

body.dark-mode {

	background: #000;

}



.dark-mode a {

	…

}

```



### isStatelessComponent(Component)



Returns a boolean of whether the given `Component` is a [functional stateless component](https://javascriptplayground.com/functional-stateless-components-react/).



### getDisplayName(Component)



Returns the [display name](https://reactjs.org/docs/react-component.html#displayname) of the given `Component`.



### canUseDOM



A boolean of whether you're running in a context with a [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction). Can be used to check if your component is running in the browser or if it's being server-rendered.



## Related



- [react-router-util](https://github.com/sindresorhus/react-router-util) - Useful components and utilities for working with React Router

- [sass-extras](https://github.com/sindresorhus/sass-extras) - Useful utilities for working with Sass

- [class-names](https://github.com/sindresorhus/class-names) - Conditionally join CSS class names together