Floating-icon-navigation

Live Demo

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