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:

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

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

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

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

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

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

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

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

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

---

Running locally:

Simply run npm i followed by npm start