1.0.11 • Published 9 months ago
@actav/floating-icon-navigation v1.0.11
Floating-icon-navigation
Ex)
Installation
yarn add @actav/floating-icon-navigation
or
npm install @actav/floating-icon-navigation
Usage
Provider
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>,
);
Components
Fins, Fin: Content Generator
// ... 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:
FinReceiver: Content Receiver
// ... 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
Fin
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 |
1.0.11
9 months ago
1.0.10
9 months ago
1.0.9
9 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
0.0.6
10 months ago
0.0.5
10 months ago
0.0.4
10 months ago
0.0.3
10 months ago
0.0.2
10 months ago
0.0.1
10 months ago
0.0.0
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago