react-speed-dial

React Component that implements a speed dial using Material-UI.

For Material-UI v1 use material-ui-speed-dial

like inbox	toolbox version
open demo	open demo

Installation

For the installation of Material-UI please have look in the Material-UI Documentation

React speed dial is available as an npm package.

npm install react-speed-dial

Usage

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 (     <MuiThemeProvider>       <SpeedDial>         <BubbleList>           <BubbleListItem             primaryText="Eric Hoffman"             rightAvatar={<Avatar src="http://lorempixel.com/80/80" />}           />         </BubbleList>       </SpeedDial>     </MuiThemeProvider>   ); };  App.displayName = 'App';  export default App;

Documentation

http://smollweide.github.io/react-speed-dial/

Examples

• Basic
• Position top left
• Position inline
• Without backdrop
• Like inbox
• Custom direction
• With List component
• Toolbox
• Toolbox fixed
• Controlled SpeedDial

Shields

Contributing

This project was bootstrapped with 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]:<yourname>/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.