React-Tiny-Fab

A tiny Floating Action Button for React

https://dericgw.github.io/react-tiny-fab

A tiny (~1kb gzip) WIA-ARIA compliant Floating Action Button for React

Want to use a Floating Action Button without having to import the whole Material Design Components library? Weighing in at only around 1kb gzipped, React Tiny FAB is a great solution. It is a lightweight, fast, and flexible component.

Install

npm install react-tiny-fab
yarn add react-tiny-fab

Usage

There are two components available for import – Fab and Action. You import them like this:

import { Fab, Action } from 'react-tiny-fab';
import 'react-tiny-fab/styles.css';

Here is an example of how you would use the components:

// The Fab is the main button. Pass any component to the icon prop and choose 
// either click or hover for the event (default is hover)
<Fab
  mainButtonStyles={mainButtonStyles}
  actionButtonStyles={actionButtonStyles}
  position={position}
  icon={<MdAdd />}
  event={event}
>
  // The Action components are the "buttons" that appear when the Fab is open. You can use the out-of-the-box Action 
  // component or you can use a custom component of any type and style it any way that you'd like. The "text" prop
  // is the popup label that appears when the Action component is hovered.
  <Action
    text="Email"
    onClick={handleEmailOnClick}
  >
  <Action
      text="Help"
      onClick={handleHelpOnClick}
    >
    <i className="fa fa-help" />
  </Action>
  // Using a custom component for this one. See another example in "example/src/index.js"
  <SomeCustomComponent
    text="Foobar!"
    onClick={handleTheFooBarOnClick}
  >
      <i className="fa fa-foo-bar-fa-foo" />
    </SomeCustomComponent>
  

Read full article on GitHub

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.