nobitagit/react-material-floating-button

Material floating action button implemented as a React component

React Material Floating Button

Material design floating action button implemented as a React component.

Made to be fast and easy to customize. Shamelessly inspired by action buttons from Google Inbox, Evernote and Path.

Clone/download the repo from Github or just use npm:

npm install react-mfb --save

Docs are still to come (but hopefully will be there soon). In the meantime if you want to play with it check the project homepage source code for hints on how to use the component.

Demo

See the project page or just look at this awesome gif:

Other versions

• Vanilla html (original, upstream version of the component)
• Angular directive

Demo icons courtesy of Ionicons

react-material-floating-button's Issues

Accept inline styles

Hi,

I'm using your awesome component in a project. I tried to pass inline styles to the main and child buttons but I realized that them are not taking that in count the style property. I made some changes in the component and now is taking the style property too. I think that this functionality can help others so is a good idea to include this on master branch.

Thanks & regards.

Play nice with React Router?

Clicking on a link causes an unwanted page reload when using react-router.
Is there any way to make this menu use a router instead?

Add overlay/obfuscator

An overlay (like behind drawers) could add two benefices:

• handle the click on it to close the mfb or whatever
• add a custom background color with opacity (like 0.1)

I imagine this new props:

overlay: bool (default: false)

closeOnOverlayClick: bool (default: true)

overlayClick: func (optional)

overlayBackgroundColor: string (default: 'transparent')

overlayBackgroundOpacity: numb (default: 0')

---

How do you feel with this ideas?
Thanks

mfb.scss unsuable without _/_slidein.scss in distribution

Problem
The mfb.scss file included in the npm distribution references _/_slidein.scss which is not included.
That makes mfb.scss almost unusable. That is

@import '~react-mfb/mfb.scss'; 

causes

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?{}!./src/app/mfb.scss
Module build failed: 
@import "_/_slidein";
^
      File to import not found or unreadable: _/_slidein.

Solution
Include mfb/src/_ folder in the npm distribution.

Workaround
When using webpack with sass-loader

1. Include a copy of mfb/src/_ in your project's sources, e.g in src/_ folder
2. In webpack.config.js include:

    module: {
        rules: [
           /*...*/
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                           /* or other directory where you've placed the copy of _*/
                            includePaths: ["src"] 
                        }
                    }
                ]
            }
        ]
    },

write dead line-height of icon

.mfb-component__icon{
  position: absolute;
  font-size: 18px;
  text-align: center;
  line-height: 56px; // $main_button_size or $child_button_size?
  width: 100%;
}

npm ERR! peerinvalid Peer [email protected] wants react@^0.13.0

When trying to install react-mfb in a Meteor project I get the following errors since React was updated to 15.0.0 back in April.

npm ERR! peerinvalid Peer [email protected] wants react@^0.13.0

Is there a way to add more than 4 menu items?

I see that all transitions are CSS based. If you try to add more than 4 menu items just first 4 will be seen. Is there a way to add more items?

Replace deprecated React.createClass

Due to the deprecation of React.createClass this warning is raised:

Warning: MainButton: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I'm opening this issue to suggest to follow one of this plans: change the definitions of the components (Menu, MainButton and ChildButton) using plain JS classes, or use the create-react-class module. The most straightforward solution is just use the create-react-class module.

WDYT @nobitagit?

(related #24)

React implementation

How do I implement this into my react project. Having trouble using this.

Referenced the project example folder index.js to do this but failing to render the component correctly.

Warning: MainButton: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Integration with Google Material Icons

Are you willing to integrate the icon using Google Material Icons? if you are, i will pull request to merge the enhancement..

How to import it in create-react-app?

Is there a straight way to import the component using 'import from'?

Include SCSS in npm install

It would be good to also include the SCSS file when we do npm install react-mfb.
This would allow us to do an @import in our own application scss, and at the same time tweak the variables.

Close menu after select (click) any child

Hi,

Thanks for this awesome component.
I'm using it to trigger some actions but I want to close the menu after the user clicks in some child element.

¿Any ideas?
Regards.

Is this repo is active?

I see issues without responses, usefull pull requests not merged, so I just ask to be sure to not loose time.
Thanks

Can I fork this repository in order to activate it again?

Hi there,

I ve seen that in a long time that repo hasn't been updated, and so many helpful pull requests have fallen into oblivion. So, I' m gonna do another repository in order to satisfy all the people who wants background overlay, good behaviour of the onClick methods, etc....

On Hover, Open Div with Text Content and not just Image

#On Hover, I want to add HTML in Rectangular box, instead of Icon

React 16 support

The project is not working with react 16 at the moment. Is there an update planned?

[email protected] requires a peer of react@^15.3.1

Best regards :-)