Ex)
yarn add @actav/floating-icon-navigation
or
npm install @actav/floating-icon-navigation
Wrap your App with Fin Provider
// ... some imports
import { FinProvider } from '@actav/floating-icon-navigation';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<FinProvider>
<App />
</FinProvider>
</React.StrictMode>,
);
// ... some imports
import { Fins, Fin } from '@actav/floating-icon-navigation';
function Generator() {
// There should be at least one Fin component with index
return (
<Fins>
<Fin index path='main' activeColor='#4263EB' icon={<AiFillHome />}>
Home
</Fin>
<Fin path='git' icon={<AiFillGithub />}>
Visit{' '}
<a href='https://github.com/ActaV-N/floating-icon-navigation' target='_blank' rel='noopener'>
repository
</a>
</Fin>
<Fin path='info' activeColor='#40C057' icon={<AiFillExclamationCircle />}>
This package is created by Lee
</Fin>
</Fins>
);
}
export default Generator;
Abovce code will make this:
![Screenshot 2023-07-15 at 1 18 34 AM](https://private-user-images.githubusercontent.com/26318387/253624294-418226c1-94d2-4228-91d9-42e8c195ed7a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMTEyNzMsIm5iZiI6MTcyNDExMDk3MywicGF0aCI6Ii8yNjMxODM4Ny8yNTM2MjQyOTQtNDE4MjI2YzEtOTRkMi00MjI4LTkxZDktNDJlOGMxOTVlZDdhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIzNDI1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYzZmNmM2EyY2MxMTZlNTBmNTFhM2RjYWFjZTJhZWViZWQyMGNmODE3YmY5YWM3MjkzZTFhM2RiOWJhNDNhMDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.s0rZQ92wsdJc0oZgcJ6mpM_0KyU6yt4HNhX1bMW3ga0)
// ... some imports
import { FinReceiver } from '@actav/floating-icon-navigation';
function Receiver() {
return (
<div>
<FinReceiver />
<Generator />
</div>
);
}
export default Receiver;
If you add receiver, result will be like this:
![Screenshot 2023-07-15 at 1 18 39 AM](https://private-user-images.githubusercontent.com/26318387/253624263-84c8217a-2b56-4dbf-a7c6-b0094a4795b0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMTEyNzMsIm5iZiI6MTcyNDExMDk3MywicGF0aCI6Ii8yNjMxODM4Ny8yNTM2MjQyNjMtODRjODIxN2EtMmI1Ni00ZGJmLWE3YzYtYjAwOTRhNDc5NWIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIzNDI1M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlkMzljODgwZWYwNzMzMWU5OGQyYjU4ZDlhNjY2M2EwNzgxOGQwYzBkZjVmNjAyNTRjZGNkOWRmZWZkZGYxYTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.tG_dpiI3k9pWPhiqPSHeELkaxHiSQliN8OpVBCfQhb4)
props | description | type |
---|---|---|
icon | icon component, representing navigation button | React.ReactNode |
activeColor | css color string like hex, '#fff' or RGBA, 'rgba(255, 255, 255, 1)'. This activeColor will be applied when the fin is activated. | string? |
index | Default fin. It's optional property but at least one should be a index | bolean? |
path | path for navigation. It's like ID. | string |
children | children of will be shown in Receiver. | React.ReactNode |