https://github.com/actav-n/floating-icon-navigation
React navigation component package
https://github.com/actav-n/floating-icon-navigation
fin floating-icon-navigation navigation navigation-component react-navigation reactjs reactjs-component
Last synced: about 1 month ago
JSON representation
React navigation component package
- Host: GitHub
- URL: https://github.com/actav-n/floating-icon-navigation
- Owner: ActaV-N
- License: mit
- Created: 2023-07-13T02:30:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-01T01:03:57.000Z (almost 2 years ago)
- Last Synced: 2024-11-12T12:55:15.000Z (7 months ago)
- Topics: fin, floating-icon-navigation, navigation, navigation-component, react-navigation, reactjs, reactjs-component
- Language: TypeScript
- Homepage: https://actav-n.github.io/floating-icon-navigation/
- Size: 1.4 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Floating-icon-navigation
[**Live Demo**](https://actav-n.github.io/floating-icon-navigation/)
Ex)
# Installation
```sh
yarn add @actav/floating-icon-navigation
```
or
```sh
npm install @actav/floating-icon-navigation
```
# Usage
## Provider
Wrap your App with Fin `Provider`
```ts
// ... some imports
import { FinProvider } from '@actav/floating-icon-navigation';
ReactDOM.createRoot(document.getElementById('root')!).render(
,
);
```
## Components
### Fins, Fin: Content Generator
```ts
// ... some imports
import { Fins, Fin } from '@actav/floating-icon-navigation';
function Generator() {
// There should be at least one Fin component with index
return (
}>
Home
}>
Visit{' '}
repository
}>
This package is created by Lee
);
}
export default Generator;
```
Abovce code will make this:
### FinReceiver: Content Receiver
```ts
// ... some imports
import { FinReceiver } from '@actav/floating-icon-navigation';
function Receiver() {
return (
);
}
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 |