https://github.com/hribb/react-mdl-extra
React MDL Extra components
https://github.com/hribb/react-mdl-extra
design material mdl react react-mdl
Last synced: about 1 year ago
JSON representation
React MDL Extra components
- Host: GitHub
- URL: https://github.com/hribb/react-mdl-extra
- Owner: HriBB
- License: mit
- Created: 2016-09-12T01:53:57.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-06T05:59:59.000Z (about 8 years ago)
- Last Synced: 2025-04-23T13:29:43.603Z (about 1 year ago)
- Topics: design, material, mdl, react, react-mdl
- Language: JavaScript
- Homepage: https://hribb.github.io/react-mdl-extra/?down=0
- Size: 820 KB
- Stars: 41
- Watchers: 3
- Forks: 17
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://github.com/tleunen/react-mdl).
All components use a custom `Dropdown`, that uses [react-portal](https://github.com/tajo/react-portal) to render itself to document `body`, and [Tether](tether.io) 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';
Open} align={'tl bl'} offset={'0 10px'}>
...
```
### SelectField
```
import { SelectField, Option } from 'react-mdl-extra';
One
Two
Three
Four
Five
```
### MultiSelectField
```
import { MultiSelectField, Option } from 'react-mdl-extra';
One
Two
Three
Four
Five
```
### Menu
```
import { Menu, MenuItem } from 'react-mdl-extra';
Open menu}>
One
Two
Three
```
### 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' },
]
```
## Positioning Dropdown
See [tether](http://tether.io/). 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 **t**op **l**eft edge of the dropdown to the **b**ottom **l**eft edge of the target.
**align="br tr"**
Attach **b**ottom **r**ight edge of the dropdown to the **t**op **r**ight edge of the target.
## TODO
- [x] Split Dropdown into a separate component
- [x] ~~Use native controls on mobile~~
- [x] ~~Improve AutoComplete on mobile~~
- [x] Improve styles and remove sass
- [x] Improve position declaration
- [x] Create `MultiSelectField`
- [x] Create `AutoCompleteField`
- [x] ~~Create `DatePickerField`~~
- [x] ~~Key and focus handling~~
- [x] ~~Add tests~~