https://github.com/smollweide/react-speed-dial
React Component that implements a speed dial using Material-UI.
https://github.com/smollweide/react-speed-dial
inbox material-design material-ui react speed-dial toolbox
Last synced: 4 months ago
JSON representation
React Component that implements a speed dial using Material-UI.
- Host: GitHub
- URL: https://github.com/smollweide/react-speed-dial
- Owner: smollweide
- License: mit
- Created: 2016-11-26T20:04:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-27T11:49:23.000Z (about 7 years ago)
- Last Synced: 2024-10-05T09:17:16.294Z (9 months ago)
- Topics: inbox, material-design, material-ui, react, speed-dial, toolbox
- Language: JavaScript
- Homepage: http://smollweide.github.io/react-speed-dial/
- Size: 5.74 MB
- Stars: 60
- Watchers: 5
- Forks: 23
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-speed-dial [](https://travis-ci.org/smollweide/react-speed-dial)
> React Component that implements a speed dial using [Material-UI](http://www.material-ui.com).
For **Material-UI v1** use [material-ui-speed-dial](https://github.com/smollweide/material-ui-speed-dial)
like inbox | toolbox version
------------ | -------------
| 
[open demo](https://smollweide.github.io/react-speed-dial/#/inbox) | [open demo](https://smollweide.github.io/react-speed-dial/#/toolbox)
## Installation
For the installation of Material-UI please have look in the [Material-UI Documentation](https://github.com/callemall/material-ui)
React speed dial is available as an [npm package](https://www.npmjs.org/package/react-speed-dial).
```sh
npm install react-speed-dial
```
## Usage
```jsx
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Avatar from 'material-ui/Avatar';
import { SpeedDial, BubbleList, BubbleListItem } from 'react-speed-dial';
const App = () => {
return (
}
/>
);
};
App.displayName = 'App';
export default App;
```
## Documentation
[http://smollweide.github.io/react-speed-dial/](http://smollweide.github.io/react-speed-dial/)
## Examples
- [Basic](https://smollweide.github.io/react-speed-dial/#/basic)
- [Position top left](https://smollweide.github.io/react-speed-dial/#/top-left)
- [Position inline](https://smollweide.github.io/react-speed-dial/#/inline)
- [Without backdrop](https://smollweide.github.io/react-speed-dial/#/no-backdrop)
- [Like inbox](https://smollweide.github.io/react-speed-dial/#/inbox)
- [Custom direction](https://smollweide.github.io/react-speed-dial/#/direction)
- [With `List` component](https://smollweide.github.io/react-speed-dial/#/list)
- [Toolbox](https://smollweide.github.io/react-speed-dial/#/toolbox)
- [Toolbox fixed](https://smollweide.github.io/react-speed-dial/#/toolbox-fixed)
- [Controlled SpeedDial](https://smollweide.github.io/react-speed-dial/#/bug11)
## Shields
[](https://coveralls.io/github/smollweide/react-speed-dial?branch=master)
[](http://npm.im/react-speed-dial)
[](https://npm-stat.com/charts.html?package=react-speed-dial)
[](http://opensource.org/licenses/MIT)
[](https://github.com/namics/eslint-config-namics)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/prettier/prettier)
[](https://github.com/semantic-release/semantic-release)
## Contributing
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
### Getting started
1. Fork the React-speed-dial repository on Github
2. Clone your fork to your local machine `git clone [email protected]:/react-speed-dial.git`
3. Create a branch `git checkout -b my-topic-branch`
4. Make your changes and add tests for them, lint, test then push to to github with `git push --set-upstream origin my-topic-branch`.
5. Visit github and make your pull request.
### Scripts
- Install `npm install` or `yarn install`
- Start developing `npm start` or `yarn start`
- Lint `npm run lint` or `yarn lint`
- Test `npm test` or `yarn test`
- Build `npm run build` or `yarn build`
- Static server `npm run static-server` or `yarn static-server`
### Coding style
Please follow the coding style of the current code base.
React-speed-dial uses eslint, so if possible, enable linting in your editor to get realtime feedback.
The linting rules can be run manually with `npm run lint`.