React-MDL SelectField
This project is not maintained anymore. If someone wishes to take over, let me know ;)
Extra components for React Material Design Lite.
All components use a custom Dropdown, that uses react-portal to render itself to document body, and Tether for positioning.
Installation
npm install --save react-mdl-extra
Examples
https://hribb.github.io/react-mdl-extra/?down=0
git clone https://github.com/HriBB/react-mdl-extra
cd react-mdl-extra
npm install
npm run storybook
open http://localhost:9002/
Usage
Dropdown
import { Dropdown } from 'react-mdl-extra';
<Dropdown target={<Button>Open</Button>} align={'tl bl'} offset={'0 10px'}>
<div className={'custom-menu'}>
...
</div>
</Dropdown>
SelectField
import { SelectField, Option } from 'react-mdl-extra';
<SelectField label={'Select me'} value={3}>
<Option value={1}>One</Option>
<Option value={2}>Two</Option>
<Option value={3}>Three</Option>
<Option value={4}>Four</Option>
<Option value={5}>Five</Option>
</SelectField>
MultiSelectField
import { MultiSelectField, Option } from 'react-mdl-extra';
<MultiSelectField label={'Select me many times'} value={[1,3]}>
<Option value={1}>One</Option>
<Option value={2}>Two</Option>
<Option value={3}>Three</Option>
<Option value={4}>Four</Option>
<Option value={5}>Five</Option>
</MultiSelectField>
Menu
import { Menu, MenuItem } from 'react-mdl-extra';
<Menu target={<Button raised>Open menu</Button>}>
<MenuItem>One</MenuItem>
<MenuItem>Two</MenuItem>
<MenuItem>Three</MenuItem>
</Menu>
AutoComplete
import { AutoComplete } from 'react-mdl-extra';
const items = [
{ id: 1, name: 'Darth Vader' },
{ id: 2, name: 'Luke Skywalker' },
{ id: 3, name: 'Obi Wan Kenobi' },
]
<AutoComplete
label={'I will complete you'}
items={items}
valueIndex={'id'}
dataIndex={'name'}
/>
Positioning Dropdown
See tether. Uses shorthand declaration. First two letter are the attachment property, followed by a space and second two letters, which are the targetAttachment property.
Examples:
align="tl bl"
Attach top left edge of the dropdown to the bottom left edge of the target.
align="br tr"
Attach bottom right edge of the dropdown to the top right edge of the target.
TODO
- Split Dropdown into a separate component
-
Use native controls on mobile -
Improve AutoComplete on mobile - Improve styles and remove sass
- Improve position declaration
- Create
MultiSelectField - Create
AutoCompleteField -
CreateDatePickerField -
Key and focus handling -
Add tests