Materials

BRC Materials React component library.

To see examples and documentation go to https://boruei-chen.github.io/materials/.

Installation

BRC Materials is available as an npm package.

npm

npm install @boruei.chen/materials

yarn

yarn add @boruei.chen/materials

Usage

• Form
  • Textbox
  • Textarea
  • Password
  • Select
  • Switch
  • Checkbox
  • Radio

Form

Textbox

import React from 'react';
import { Textbox } from '@boruei.chen/materials';

const App: React.FC = () => <Textbox placeholder="Placeholder text" />;

export default App;

Textarea

import React from 'react';
import { Textarea } from '@boruei.chen/materials';

const App: React.FC = () => <Textarea placeholder="Placeholder text" />;

export default App;

Password

import React from 'react';
import { Password } from '@boruei.chen/materials';

const App: React.FC = () => <Password toggleMask placeholder="Placeholder text" />;

export default App;

Select

import React from 'react';
import { Select } from '@boruei.chen/materials';

const App: React.FC = () => (
  <Select placeholder="Placeholder text">
    <Select.Option value="0">Option 1</Select.Option>
    <Select.Option value="1">Option 2</Select.Option>
    <Select.Option value="2">Option 3</Select.Option>
  </Select>
);

export default App;

Switch

import React from 'react';
import { Switch } from '@boruei.chen/materials';

const App: React.FC = () => <Switch>Label text</Switch>;

export default App;

Checkbox

import React from 'react';
import { Checkbox } from '@boruei.chen/materials';

const App: React.FC = () => <Checkbox>Label text</Checkbox>;

export default App;

Checkbox.Group

import React from 'react';
import { Checkbox } from '@boruei.chen/materials';

const App: React.FC = () => (
  <Checkbox.Group name="field">
    <Checkbox value="0">Option 1</Checkbox>
    <Checkbox value="1">Option 2</Checkbox>
    <Checkbox value="2">Option 3</Checkbox>
  </Checkbox.Group>
);

export default App;

Radio

import React from 'react';
import { Radio } from '@boruei.chen/materials';

const App: React.FC = () => <Radio value="0">Label text</Radio>;

export default App;

Radio.Group

import React from 'react';
import { Radio } from '@boruei.chen/materials';

const App: React.FC = () => (
  <Radio.Group name="field">
    <Radio value="0">Option 1</Radio>
    <Radio value="1">Option 2</Radio>
    <Radio value="2">Option 3</Radio>
  </Radio.Group>
);

export default App;

Technologies

License

This project is licensed under the terms of the MIT license.