🎉 Features

• Written in Typescript, Friendly Static Type Support.

🔥 Demo

Live demo: panel-navigation

🔥 Install

# with npm
npm install panel-navigation

👍 Usage

Here is a quick example to get you started, it's all you need:

import React, { useState } from "react";
import { createRoot } from 'react-dom/client';
import { Navigation, Item, Panel } from 'panel-navigation';
import 'panel-navigation/lib/index.css';

const App = () => {
  return (
    <Navigation>
      <Panel itemKey="0" content={<About />}>
        <span>About Us</span>
      </Panel>
      <Panel itemKey="1" content={<Services />}>
        <span>Services</span>
      </Panel>
      <Item isSubPage={true}>
        <a>Studies</a>
      </Item>
      <Item>
        <a>News</a>
      </Item>
    </Navigation>
});

createRoot(document.getElementById('root')).render(<App />);

How to import

import { Navigation, Item, Panel } from 'panel-navigation';
import 'panel-navigation/lib/index.css';

Eases

Component uses a default ease of "expo.out". You can easily overwrite this by setting the ease property to another (valid) ease value.

• none.none
• power1.out
• circ.out
• power4.out

API Reference

| Properties | Description | Type | Default | | ------------- | ----------------------------------------------------- | ----------------- | -------------- | | visible | control visible state | boolean | true | | ease | ease property | string | expo.out | | duration | the duration of the transition, in milliseconds | number | 600 | | onEntered | callback fired after the "entered" status is applied. | function(e) => {} | () => {} | | onExited | callback fired after the "exited" status is applied. | function(e) => {} | () => {} | | htmlClassName | add className to html tag | string | scrollDisabled |

Panel

| Properties | Description | Type | Default | | ---------- | ------------------- | --------- | ------- | | itemKey | key of the panel | string | | | isSubPage | set a special style | boolean | false | | content | panel content | ReactNode | |

Item

| Properties | Description | Type | Default | | ---------- | ---------------------- | ------- | ------- | | isSubPage | set some special style | boolean | false |

🎈 License

React Navigation is MIT Licensed