panel-navigation v1.0.1

🎉 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

Panel

Item

🎈 License

React Navigation is MIT Licensed