NowTV React Toolkit

This is a tookit of NowTV React UI components.

Installation

npm install @nowtv/nowtv-react-tookit --save

Usage

Javascript

// ES5
var Toolkit = require('nowtv-react-tookit');

// ES6
import Tookit from 'nowtv-react-toolkit';

CSS

You will need to require the CSS into your project which can be done in two ways:

Require it into your sass / scss file.

@import '[path-to-node_modules]/nowtv-react-toolkit/dist/toolkit';

Pull from CDN.

<link type="text/html" rel="stylesheet" href="//development.toolkit.divshot.io/dist/toolkit.css"/>`

Importing Individual ES6 Components Directly

If you're running an ES6 project and wish to only import specific components that you will compile within your project.

Install the project from NPM, this is to avoid .babelrc conflicts when using github installs. You'll need to have access to scoped npm packages for @nowtv.

npm install @nowtv/nowtv-react-toolkit --save

Note: When installing onto external services such as heroku, you will need to ensure that the app has correct NPM scope access using an NPM_TOKEN env variable.

Use the nowtv-toolkit css

E.g.

<link rel="stylesheet" href="/node_modules/nowtv-toolkit/dist/toolkit.css">

Make sure you're compiling nowtv-react-toolkit that lives in node_modules during your project's build.

Server E.g.

require('babel/register')({
  only: [/nowtv-react-toolkit/, /* YOUR_SOURCE, etc... */]
});

Note: The above example uses babel/register instead of a .babelrc file, as regex options are advised and easier to debug. This is also babel v5 syntax, babel v6 uses babel-register

Client E.g.

// webpack config
module: {
  loaders: [{
    test: /\.jsx?$/,
    loader: 'babel',
    include: [/nowtv-react-toolkit/, /* YOUR_SOURCE, etc... */],
    // babel version 6 style query
    query: {
      presets: ["react", "stage-1", "es2015"]
    }
  }]
}

Note: You'll need to also support class properties in your compilation due to the components use of static properties.

Import the specific components directly

import Button from '@nowtv/nowtv-react-toolkit/src/components/Button/Button.react';

Note: if the component you wish to use depends on its own sass file, you will need to also compile or ignore sass files in your build.

Components

To see all the avaliable components see the docs which can be found at http://sky-uk.github.io/nowtv-react-toolkit

Contributing

contributing

bentidy/nowtv-react-toolkit