{"id":13402506,"url":"https://github.com/smollweide/react-speed-dial","last_synced_at":"2026-01-18T16:34:38.617Z","repository":{"id":57345135,"uuid":"74847852","full_name":"smollweide/react-speed-dial","owner":"smollweide","description":"React Component that implements a speed dial using Material-UI.","archived":false,"fork":false,"pushed_at":"2018-06-27T11:49:23.000Z","size":6016,"stargazers_count":60,"open_issues_count":3,"forks_count":23,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-05T09:17:16.294Z","etag":null,"topics":["inbox","material-design","material-ui","react","speed-dial","toolbox"],"latest_commit_sha":null,"homepage":"http://smollweide.github.io/react-speed-dial/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smollweide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-26T20:04:53.000Z","updated_at":"2022-02-23T11:11:48.000Z","dependencies_parsed_at":"2022-09-16T18:11:56.528Z","dependency_job_id":null,"html_url":"https://github.com/smollweide/react-speed-dial","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smollweide%2Freact-speed-dial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smollweide%2Freact-speed-dial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smollweide%2Freact-speed-dial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smollweide%2Freact-speed-dial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smollweide","download_url":"https://codeload.github.com/smollweide/react-speed-dial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221449526,"owners_count":16823607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inbox","material-design","material-ui","react","speed-dial","toolbox"],"created_at":"2024-07-30T19:01:16.958Z","updated_at":"2026-01-18T16:34:38.611Z","avatar_url":"https://github.com/smollweide.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# react-speed-dial [![Build Status](https://img.shields.io/travis/smollweide/react-speed-dial/master.svg)](https://travis-ci.org/smollweide/react-speed-dial)\n\n\u003e React Component that implements a speed dial using [Material-UI](http://www.material-ui.com).\n\nFor **Material-UI v1** use [material-ui-speed-dial](https://github.com/smollweide/material-ui-speed-dial)\n\nlike inbox | toolbox version\n------------ | -------------\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/2912007/21943125/28c3e96a-d9d0-11e6-96f1-dc3fbf4dae8d.gif\" alt=\"inbox\" width=\"180\" /\u003e | \u003cimg src=\"https://cloud.githubusercontent.com/assets/2912007/21943136/32341bf0-d9d0-11e6-8a8f-919b68d19ee5.gif\" alt=\"toolbox\" width=\"180\" /\u003e\n[open demo](https://smollweide.github.io/react-speed-dial/#/inbox) | [open demo](https://smollweide.github.io/react-speed-dial/#/toolbox)\n\n\n## Installation\n\nFor the installation of Material-UI please have look in the [Material-UI Documentation](https://github.com/callemall/material-ui)\n\nReact speed dial is available as an [npm package](https://www.npmjs.org/package/react-speed-dial).\n\n```sh\nnpm install react-speed-dial\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';\n\nimport Avatar from 'material-ui/Avatar';\nimport { SpeedDial, BubbleList, BubbleListItem } from 'react-speed-dial';\n\nconst App = () =\u003e {\n  return (\n    \u003cMuiThemeProvider\u003e\n      \u003cSpeedDial\u003e\n        \u003cBubbleList\u003e\n          \u003cBubbleListItem\n            primaryText=\"Eric Hoffman\"\n            rightAvatar={\u003cAvatar src=\"http://lorempixel.com/80/80\" /\u003e}\n          /\u003e\n        \u003c/BubbleList\u003e\n      \u003c/SpeedDial\u003e\n    \u003c/MuiThemeProvider\u003e\n  );\n};\n\nApp.displayName = 'App';\n\nexport default App;\n```\n## Documentation\n[http://smollweide.github.io/react-speed-dial/](http://smollweide.github.io/react-speed-dial/)\n\n## Examples\n- [Basic](https://smollweide.github.io/react-speed-dial/#/basic)\n- [Position top left](https://smollweide.github.io/react-speed-dial/#/top-left)\n- [Position inline](https://smollweide.github.io/react-speed-dial/#/inline)\n- [Without backdrop](https://smollweide.github.io/react-speed-dial/#/no-backdrop)\n- [Like inbox](https://smollweide.github.io/react-speed-dial/#/inbox)\n- [Custom direction](https://smollweide.github.io/react-speed-dial/#/direction)\n- [With `List` component](https://smollweide.github.io/react-speed-dial/#/list)\n- [Toolbox](https://smollweide.github.io/react-speed-dial/#/toolbox)\n- [Toolbox fixed](https://smollweide.github.io/react-speed-dial/#/toolbox-fixed)\n- [Controlled SpeedDial](https://smollweide.github.io/react-speed-dial/#/bug11)\n\n## Shields\n[![coverage status](https://coveralls.io/repos/github/smollweide/react-speed-dial/badge.svg?branch=master)](https://coveralls.io/github/smollweide/react-speed-dial?branch=master)\n[![npm](https://img.shields.io/npm/v/react-speed-dial.svg)](http://npm.im/react-speed-dial)\n[![downloads](https://img.shields.io/npm/dm/react-speed-dial.svg)](https://npm-stat.com/charts.html?package=react-speed-dial)\n[![MIT License](https://img.shields.io/npm/l/react-speed-dial.svg)](http://opensource.org/licenses/MIT)\n[![Codestyle](https://img.shields.io/badge/codestyle-namics-green.svg)](https://github.com/namics/eslint-config-namics)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n## Contributing\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\n### Getting started\n\n1. Fork the React-speed-dial repository on Github\n2. Clone your fork to your local machine `git clone git@github.com:\u003cyourname\u003e/react-speed-dial.git`\n3. Create a branch `git checkout -b my-topic-branch`\n4. Make your changes and add tests for them, lint, test then push to to github with `git push --set-upstream origin my-topic-branch`.\n5. Visit github and make your pull request.\n\n### Scripts\n- Install `npm install` or `yarn install`\n- Start developing `npm start` or `yarn start`\n- Lint `npm run lint` or `yarn lint`\n- Test `npm test` or `yarn test`\n- Build `npm run build` or `yarn build`\n- Static server `npm run static-server` or `yarn static-server`\n\n### Coding style\nPlease follow the coding style of the current code base.\nReact-speed-dial uses eslint, so if possible, enable linting in your editor to get realtime feedback.\nThe linting rules can be run manually with `npm run lint`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmollweide%2Freact-speed-dial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmollweide%2Freact-speed-dial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmollweide%2Freact-speed-dial/lists"}