react-extras
Advanced tools
Comparing version 0.5.0 to 0.6.0
@@ -6,3 +6,3 @@ 'use strict'; | ||
}); | ||
exports.canUseDOM = exports.getDisplayName = exports.isStatelessComponent = exports.BodyClass = exports.RootClass = exports.For = exports.Choose = exports.If = exports.classNames = exports.autoBind = undefined; | ||
exports.BodyClass = exports.RootClass = exports.For = exports.Choose = exports.If = exports.canUseDOM = exports.getDisplayName = exports.isStatelessComponent = exports.classNames = exports.autoBind = undefined; | ||
@@ -23,3 +23,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
var _autoBind2 = require('auto-bind'); | ||
var _autoBind2 = require('./auto-bind'); | ||
@@ -112,2 +112,12 @@ var _autoBind3 = _interopRequireDefault(_autoBind2); | ||
var isStatelessComponent = exports.isStatelessComponent = function isStatelessComponent(Component) { | ||
return !(typeof Component.prototype !== 'undefined' && typeof Component.prototype.render === 'function'); | ||
}; | ||
var getDisplayName = exports.getDisplayName = function getDisplayName(Component) { | ||
return Component.displayName || Component.name || 'Component'; | ||
}; | ||
var canUseDOM = exports.canUseDOM = typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document; | ||
var If = exports.If = function If(props) { | ||
@@ -254,12 +264,2 @@ return props.condition ? props.render ? props.render() : props.children : null; | ||
BodyClass.propTypes = ElementClass.propTypes; | ||
var isStatelessComponent = exports.isStatelessComponent = function isStatelessComponent(Component) { | ||
return !(typeof Component.prototype !== 'undefined' && typeof Component.prototype.render === 'function'); | ||
}; | ||
var getDisplayName = exports.getDisplayName = function getDisplayName(Component) { | ||
return Component.displayName || Component.name || 'Component'; | ||
}; | ||
var canUseDOM = exports.canUseDOM = typeof window !== 'undefined' && 'document' in window && 'createElement' in window.document; | ||
BodyClass.propTypes = ElementClass.propTypes; |
{ | ||
"name": "react-extras", | ||
"version": "0.5.0", | ||
"version": "0.6.0", | ||
"description": "Useful components and utilities for working with React", | ||
@@ -13,2 +13,3 @@ "license": "MIT", | ||
"main": "./dist/index.js", | ||
"typings": "./index.d.ts", | ||
"engines": { | ||
@@ -18,3 +19,3 @@ "node": ">=8" | ||
"scripts": { | ||
"build": "babel index.js --out-dir=dist", | ||
"build": "babel index.js auto-bind.js --out-dir=dist", | ||
"test": "xo && ava", | ||
@@ -24,3 +25,4 @@ "prepublishOnly": "npm run build" | ||
"files": [ | ||
"dist" | ||
"dist", | ||
"index.d.ts" | ||
], | ||
@@ -27,0 +29,0 @@ "keywords": [ |
@@ -12,3 +12,7 @@ # react-extras [![Build Status](https://travis-ci.org/sindresorhus/react-extras.svg?branch=master)](https://travis-ci.org/sindresorhus/react-extras) | ||
<a href="https://www.patreon.com/sindresorhus"> | ||
<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160"> | ||
</a> | ||
## Usage | ||
@@ -116,5 +120,6 @@ | ||
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`. | ||
- `<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. | ||
@@ -138,2 +143,20 @@ | ||
Or you could just use plain JavaScript: | ||
```js | ||
<div> | ||
{(() => { | ||
if (props.success) { | ||
return <h1>{props.success}</h1>; | ||
} | ||
if (props.error) { | ||
return <h1>{props.error}</h1>; | ||
} | ||
return <h1>😎</h1>; | ||
})()} | ||
</div> | ||
``` | ||
### `<For/>` | ||
@@ -155,5 +178,5 @@ | ||
<div> | ||
{['🌈', '🦄', '😎'].map((item, index) => | ||
<button key={index}>{item}</button> | ||
)} | ||
{['🌈', '🦄', '😎'].map((item, index) => | ||
<button key={index}>{item}</button> | ||
)} | ||
</div> | ||
@@ -220,2 +243,3 @@ ``` | ||
- [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 | ||
@@ -222,0 +246,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
26306
7
283
245
1