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:
// ... 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:
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 |