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.