Panel-Navigation

A component that provides navigation for pages. Quickly build beautiful React apps.

🎉 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