radon
v1.3.1
Published
A small, React UI primitive toolkit.
Downloads
40
Maintainers
Keywords
Readme
Radon Toolkit
A small, React UI primitive toolkit.
The Radon Family
radon-select
: React select box replacement componentradon-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'));