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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwOTI3ODgsIm5iZiI6MTcyNDA5MjQ4OCwicGF0aCI6Ii8yNjMxODM4Ny8yNTM2MjQyOTQtNDE4MjI2YzEtOTRkMi00MjI4LTkxZDktNDJlOGMxOTVlZDdhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDE4MzQ0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTllMWQ2NmQ1NWEzNjc5NmZkZTQ5N2IxYTA4NmMwYmVkNTBmYzU4YjA4YzhmYjRhNjRkNGM0YzM3MGU3M2MwOTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.olxAfXSYxVA20Q8hJSNq12UZ9axp4lG1N2qaEcMwzs0)
// ... 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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwOTI3ODgsIm5iZiI6MTcyNDA5MjQ4OCwicGF0aCI6Ii8yNjMxODM4Ny8yNTM2MjQyNjMtODRjODIxN2EtMmI1Ni00ZGJmLWE3YzYtYjAwOTRhNDc5NWIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDE4MzQ0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU5ZTIyZjU3Y2ZiMGQxZmQ3OGM0NDNjODA4YzU4NDBkOTY3ZWVmODliMDg2MmM2ZTlkODc0MGEyYjUwOWQ0ZDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.zH093Q897YTLjuDv5Tqr06QZd7bJr_84n1GOYZZMO2c)
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 |