radon

Radon Toolkit

A small, React UI primitive toolkit.

The Radon Family

• radon-select: React select box replacement component
• radon-typeahead: React typeahead component

Install

$ npm install --save radon # OR
$ yarn add radon

Usage

UMD

We provide UMD bundles at:

• ./dist/radon.js: Development build
• ./dist/radon.min.js: Production build

Both require that you have external dependencies available on window/global of:

• React
• ReactDOM

Libraries

We provide ESM and CommonJS versions of the Radon Toolkit. Your bundling tool should pick up the appropriate one automagically from our entries for package.json:main (CommonJS) and package.json:module (ESM).

Select

import React from 'react';
import ReactDOM from 'react-dom';
import { Select } from 'radon';

class App extends React.Component {
  render() {
    return (
      <div>
        <h3>Basic</h3>
        <Select selectName="foo">
          <Select.Option value="who">Who</Select.Option>
          <Select.Option value="what">What</Select.Option>
        </Select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Typeahead

import React from 'react';
import ReactDOM from 'react-dom';
import { Typeahead } from 'radon';

const CAR_BRANDS = [
  'Alfa Romeo',
  'Audi',
  'Bmw',
  'Chevrolet',
  'Chrystler',
  'Dodge',
  'Ferrari',
  'Fiat',
  'Ford',
  'Honda',
  'Hyundai',
  'Jaguar',
  'Jeep',
  'Kia',
  'Mazda',
  'Mercedez-Benz',
  'Mitsubish',
  'Nissan',
  'Peugeot',
  'Porsche',
  'Subaru',
  'Suzuki',
  'Toyota',
  'Volkswagen'
];

class App extends React.Component {
  render() {
    return (
      <div>
        <h3>Car Brands</h3>
        <Typeahead list={CAR_BRANDS} inputComponent={<input />}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));