# non-functionals-react

> A set of components available via the NPM registry for easy integration into any UNIT9 project using React.

Latest version **0.2.5** (published 2019-02-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install non-functionals-react
pnpm add non-functionals-react
yarn add non-functionals-react
bun add non-functionals-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.5 |
| Published | 2019-02-22 |
| First published | 2018-05-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 828.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Scott Ashmore |
| Maintainers | jimbeam, victorianine |

## Links

- npm: https://www.npmjs.com/package/non-functionals-react
- Repository: https://github.com/unit9/non-functionals-react
- Homepage: https://github.com/unit9/non-functionals-react#readme
- Issues: https://github.com/unit9/non-functionals-react/issues
- npm.io page: https://npm.io/package/non-functionals-react

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.3.2
- [is-html](https://npm.io/package/is-html.md) ^1.1.0
- [platform](https://npm.io/package/platform.md) ^1.3.5
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [ua-parser-js](https://npm.io/package/ua-parser-js.md) ^0.7.18
- [detector-webgl](https://npm.io/package/detector-webgl.md) ^2.0.0
- [semver-compare](https://npm.io/package/semver-compare.md) ^1.0.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.6

## Recent versions

- 0.2.5 (latest) — 2019-02-22
- 0.2.4 — 2018-10-04
- 0.2.3 — 2018-09-11
- 0.2.2 — 2018-09-11
- 0.2.1 — 2018-09-06
- 0.2.0 — 2018-09-05
- 0.1.15 — 2018-09-04
- 0.1.14 — 2018-09-04
- 0.1.13 — 2018-09-03
- 0.1.12 — 2018-09-03
- 0.1.11 — 2018-08-23
- 0.1.10 — 2018-08-22
- 0.1.9 — 2018-08-22
- 0.1.8 — 2018-08-22
- 0.1.7 — 2018-08-07
- … 12 more at https://npm.io/package/non-functionals-react/versions

## README

# Non Functionals React

A set of simple React components for non functional pages that are easy to implement within any React project. Just pass in the props needed to suit your project and even access the css classes for more advanced customisation.

## Installation:

`npm i non-functionals-react --save`

## Available Components:

* Not Found
* Rotate Device
* Unsupported
* WebGL Not Enabled
* Window Too Small
* Build Version

## Usage:

Simply import the components you need:

`import { NotFound, RotateDevice } from 'non-functionals-react';`

and add them to your render method:

```javascript
<NotFound
  title="OOPS!"
  subtitle="Sorry, something has gone wrong."
  description="We can't find what you're looking for."
  cta="Back to Home"
  onContinue={() => console.log('continue')}
/>
```

## Components:

#### Not Found:

##### Props:

| prop               | type     | required |
| ------------------ | ------   | -------- |
| icon               | string   | no       |
| title              | string   | yes      |
| subtitle           | string   | yes      |
| description        | string   | yes      |
| cta                | string   | yes      |
| onContinue         | function | yes      |

##### HTML structure:
```html
<div class="NotFound NonFunctionals">
  <img class="NotFound-Icon" />
  <h1 class="NotFound-Title" />
  <h2 class="NotFound-Subtitle" />
  <p class="NotFound-Description" />
  <button class="NotFound-Cta" />
</div>
```
---

#### Rotate Device:

##### Props:

| prop               | type     | required |
| ------------------ | ------   | -------- |
| mobileOrientation  | string   | yes      |
| mobileIcon         | string   | no       |
| mobileTitle        | string   | yes      |
| tabletOrientation  | string   | yes      |
| tabletIcon         | string   | no       |
| tabletTitle        | string   | yes      |

##### HTML structure:
```html
<div class="RotateDevice NonFunctionals">
  <img class="RotateDevice-Icon" />
  <h1 class="RotateDevice-Title" />
</div>
```
---

#### Unsupported:

##### Props:

| prop                   | type     | required |
| ---------------------- | ------   | -------- |
| supported              | object   | yes      |
| icon                   | string   | no       |
| unsupportedIcons       | array    | yes      |
| unsupportedIconsMobile | array    | yes      |
| title                  | string   | yes      |
| mobileTitle            | string   | yes      |
| description            | string   | yes      |
| mobileDescription      | string   | yes      |
| socialInstructions     | string   | yes      |
| cta                    | string   | yes      |

##### Note:

The `supported` prop must follow this pattern:

```javascript
{
  desktop: [
    { browser: 'chrome', minVersion: 2 },
    { browser: 'safari', minVersion: 9 },
    { browser: 'firefox', minVersion: 56 },
    { browser: 'ie', minVersion: 11 },
    { browser: 'edge', minVersion: 14 },
  ],
  tablet: [
    { os: 'ios', browser: 'mobile safari' },
    { os: 'android', browser: 'chrome' },
  ],
  mobile: [
    { os: 'ios', browser: 'mobile safari' },
    { os: 'android', browser: 'chrome' },
  ],
}
```

The `unsupportedIcons` and `unsupportedIconsMobile` props must follow this pattern:

```javascript
  { image: 'url', label: 'Optional label' },
```

Please adjust **_ONLY_** the following properties to fit your specific project:
* Desktop: `browser`, `minVersion`
* Tablet: `os`, `browser`
* Mobile: `os`, `browser`

##### HTML structure:
```html
<div class="Unsupported NonFunctionals">
  <img class="Unsupported-Icon" />
  <h1 class="Unsupported-Title" />
  <div class="Unsupported-UnsupportedIcons">
    <div>
      <img />
      <span>{Label}</span>
    </div>
  </div>
  <p class="Unsupported-Description" />
  <p class="Unsupported-SocialInstructions" />
  <button class="Unsupported-Cta" />
</div>
```
---

#### WebGL Not Enabled:

##### Props:

| prop               | type     | required |
| ------------------ | ------   | -------- |
| icon               | string   | no       |
| title              | string   | yes      |
| description        | string   | yes      |

##### HTML structure:
```html
<div class="WebGLNotEnabled NonFunctionals">
  <img class="WebGLNotEnabled-Icon" />
  <h1 class="WebGLNotEnabled-Title" />
  <p class="WebGLNotEnabled-Description" />
</div>
```
---

#### Window Too Small:

##### Props:

| prop               | type     | required |
| ------------------ | ------   | -------- |
| minWidth           | number   | yes      |
| minHeight          | number   | yes      |
| icon               | string   | no       |
| title              | string   | yes      |
| description        | string   | yes      |

##### HTML structure:
```html
<div class="WindowTooSmall NonFunctionals">
  <img class="WindowTooSmall-Icon" />
  <h1 class="WindowTooSmall-Title" />
  <p class="WindowTooSmall-Description" />
</div>
```
---

#### Build Version:

| prop    | type   | required | description |
| ------- | ------ | -------- | ----------- |
| version | string | yes      |
| live    | bool   | yes      | if `true` then component will be hidden |

##### Note:

The `version` prop should follow this format:

```javascript
v {build number} built on {new Date().toGMTString()}
```
---

## Running locally:
Simply run `npm i` followed by `npm start`

---
_Source: https://npm.io/package/non-functionals-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._