react-kfc-menu

A react menu that inspired by KFC menu and functions like it. this package works in conjunction with react-tabs-scrollable , so in order to use this package you have to install react-tabs-scrollable to use its tabs in the menu.

I took the idea while I was exlporing the KFC menu on their website and I liked the idea and I thought it's practical and simple and it can be used on restaurants and cafes menu.

Install

npm install --save react-kfc-menu
yarn add react-kfc-menu

Demo

Demo

How it works

I'm using a fixed indicator div inside the blocks' container so I can indicate if a block is overlaping the indicator so I can determine where in the page is the selected block located passed on that indicator. When you click on a tab the page will scroll to that indicator position + the current position of that block.

Usage

import React from "react";
import { Tabs, Tab } from "react-tabs-scrollable";
import { Menu, MenuBlock } from "react-kfc-menu";
import "react-tabs-scrollable/dist/rts.css";

function App() {
  const [activeTab, setActiveTab] = React.useState(10);

  // define a onClick function to bind the value on tab click
  const menuRef = useRef < any > null;
  const onTabClick = (e, index) => {
    setActiveTab(index);
    menuRef.current?.scrollSelectedToBlock(index);
  };

  const onBlockIntersection = (index) => {
    setActiveTab(index);
  };
  return (
    <>
      <div className="sticky-top bg-light">
        <div className="containr">
          <Tabs activeTab={activeTab} onTabClick={onTabClick}>
            {/* generating an array to loop through it  */}
            {[...Array(20).keys()].map((item) => (
              <Tab key={item}>Tab {item}</Tab>
            ))}
          </Tabs>
        </div>
      </div>
      <div className="row mx-auto justify-content-center">
        <div className="col-md-12">
          <Menu
            onBlockIntersection={onBlockIntersection}
            activeBlock={activeTab}
            action={menuRef}
          >
            {[...Array(20).keys()].map((item) => (
              <MenuBlock key={item}>
                <div className="display-4">Block {item}</div>{" "}
                <div className="row">
                  {[...Array(8).keys()].map((card) => (
                    <div key={card} className="col-md-3 my-2">
                      <div className="card">
                        <div className="card-body">
                          {card} Lorem ipsum dolor sit amet consectetur,
                          adipisicing elit. Modi deleniti natus voluptates
                          doloribus voluptate voluptas ab eum dolorem asperiores
                          sequi consequatur magnam architecto iure sed tempora,
                          doloremque nam? Nesciunt, ad!
                          <button className="btn btn-primary d-block w-100 mt-2">
                            order
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </MenuBlock>
            ))}
          </Menu>
        </div>
      </div>
    </>
  );
}

export default App;

API

Menu

MenuBlock

Please let me see your reviews and if there're any features you want me to add to them

If you liked this project consider buying me a coffe

License

MIT © Mohammed Aliwi