react-floating-action-button

React-Floating-Action-Button

A dead simple React component that works similar to Android's Action Button

---

Getting Started

1. First, You need to install It, just like You would do with most any NPM packages:

npm i --save react-floating-action-button

1. Then, You need to import the library component within your own component

import React from 'react'
import { Container, Button, Link } from 'react-floating-action-button'

1. You can now start using the FAB components!

export default const YourAwesomeComponent = () => {
    return (
        <Container>
            <Link href="#"
                tooltip="Create note link"
                icon="far fa-sticky-note" />
            <Link href="#"
                tooltip="Add user link"
                icon="fas fa-user-plus" />
                className="fab-item btn btn-link btn-lg text-white"
            <Button
                tooltip="The big plus button!"
                icon="fas fa-plus"
                rotate={true}
                onClick={() => alert('FAB Rocks!')} />
        </Container>
    )
}

About Components

• Container - It's simply a nav element that contains fab-container in its class list. You must involve your fab-items inside a Container, so the default styles are applied properly. Note that the last child will be recognized as the bigger button that is always visible and triggers the menu opening on hover.
• Button - A special button element that has the class fab-item and an "i" element as its first child. You can add a function the its click by passing an "onClick" just like you would with a regular button.
• Link - Works just like the Button component, but instead of a "onClick", You need to pass a "href" prop to It.

NOTE: All components support props.children rendering, which in combination with custom styles, can give You a lot of customization options.

Extra Styling

• Container - You can add custom classes using the "className" property, and also add custom styles by passing a "styles" property with an object just like you would do with the regular style.
• Button and Link - Supports all mentioned for the Container, plus gives You the option to add custom icon classes by passing an "icon" string property, and also custom icon styles by passing an object property "iconStyles"

Material Colors

React-floating-action-button also exports two objects: lightColors and darkColors. These objects contain a few preset material colors that You can use when passing custom styles to the components, and help You to keep the overall design concise.

Usage

...
import { Container, Button, lightColors, darkColors } from 'react-floating-action-button'
...
<Container>
    <Button
     tooltip="The big plus button!"
     styles={{backgroundColor: darkColors.lighterRed, color: lightColors.white}}
     />
</Container>

Light Colors

Color name	Hex value
red	#ffcdd2
pink	#f8bbd0
purple	#e1bee7
lightBlue	#81d4fa
cyan	#80deea
teal	#80cbc4
blue	#bbdefb
green	#dcedc8
yellow	#fff9c4
orange	#ffe0b2
brown	#d7ccc8
grey	#e0e0e0
darkerGrey	#bdbdbd
black	#212121
white	#f5f5f5

Dark Colors

Color name	Hex value
lighterRed	#f44336
red	#c62828
pink	#ad1457
purple	#6a1b9a
lightBlue	#01579b
cyan	#00838f
teal	#00695c
blue	#0d47a1
green	#1b5e20
yellow	#f9a825
orange	#e65100
brown	#4e342e
grey	#424242
black	#212121
white	#fafafa