Skip to content

ActaV-N/floating-icon-navigation

Repository files navigation

Floating-icon-navigation

npm GitHub Workflow Status (with event) GitHub Release Date - Published_At NPM

Live Demo

Ex)

Screen Recording 2023-07-15 at 1 21 05 AM

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:

Screenshot 2023-07-15 at 1 18 34 AM

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:

Screenshot 2023-07-15 at 1 18 39 AM

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