@izy-ui/react-floating-button v1.0.0
IZY Floating Button
Floating action button for React.js
Table of content
Install npm
Install my-project with npm
npm install my-project
cd my-project
Install dependancis
Install my-project with npm
npm install my-project
cd my-project
Demo
Create index.js
and Add below code segment
import IzyFloat from './components/IzyFloat';
function App() {
const path=[
{key: 1, title: 'Home', page: '/home', icon:'home'},
{key: 2, title: 'Contact', page: '/contact', icon:'headphone'},
{key: 3, title: 'Info', page: '/info', icon:'info-circle'}
];
const onClick =(e)=>{
console.log(e);
}
return (
<div className="App">
<IzyFloat
direction='bottom-left'
locations={path}
basecolor="primary"
onClick={onClick}
/>
</div>
);
}
export default App;
Environment Variables
To run this project, you will need to use following variables as a props
Parameter | Type | Description | Default |
---|---|---|---|
direction | top-left , top-right , bottom-left, bottom-right | Button placement area | bottom-right |
basecolor | primary , secondary , success, danger, warning, info, dark | Button colors | dark |
Also need to specify the button like bellow
| Property | Value(Example) | Description |
| :-------- | :------- | :------------------------- |
| key
| Any number ( 1 )| Identify the button |
| title
| text data( Home )| Name of the button |
| page
| link ( /home )| Add the link |
| Icon
| name of the icon ( info-circle )| Name of the icon on boxicons
library <box-icon name='info-circle'
> |
Follow the bellow example for more details
Used By
This library is used by companies:
License
Everything under the IZY component Library
Icon Library License
Copyright (c) 2015-2021 Aniket Suvarna
Authors
- Dhanushka Dewinuwara
didewinuwara@outlook.com
Appreciation
1 year ago