IZY Floating Button

Floating action button for React.js

Table of content

• Install npm
• Install dependancis
• Demo

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:

• Synapsys LTD

License

Everything under the IZY component Library

MIT

Icon Library License

Copyright (c) 2015-2021 Aniket Suvarna

MIT

Authors

• Dhanushka Dewinuwara [email protected]

Appreciation

• Amitha Mirihella