react-fab
Floating Action Buttons for React
Installing
yarn add react-fab
# Dependencies:
yarn add prop-types classnames react react-dom
Usage
<Fab style= right: '20px' bottom: '20px' > <FabButton> + </FabButton> <FabActions> <FabAction className="button button-royal" onClick=thishandleCreateGroup tooltip="Create Group" > G </FabAction> <FabAction className="button button-balanced" onClick=thishandleCreateMemo tooltip="Create Memo" > C </FabAction> </FabActions></Fab>
This package also come with a scss file that you can use:
# JavaScript import:
import 'react-fab/dist/main.scss';
# - OR -
# Scss import:
import '{}/node_modules/react-fab/dist/main.scss';
The following variables are overrideable:
$fab-button: #FFDD6B !default;
$fab-dark: #111 !default;
$fab-light: #fff !default;
$fab-text: #4a4943 !default;
$fab-z-index: 998 !default;
$fab-transition-speed: 0.2s !default;
$fab-transition-speed-delayed: 0.3s !default;