React-strip-menu NPM

React Strip Menu

Description

This is a typescript react component library, providing minimalist access for developer to realize a strip menu.

Demo

Install

npm install react-strip-menu

yarn add react-strip-men

Demo Code

create a create-react-app project

npx create-react-app its-a-demo --template typescript

and paste below content to src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { Box, Flex } from "rebass";

import { ReactStripMenu } from "react-strip-menu";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <Flex
      sx={{
        height: "72px",
        width: "100%",
        display: "flex",
        top: 0,
        zIndex: 999,
        position: "fixed",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingRight: "5%",
        background: "gray",
        backdropFilter: "unset",
      }}
    >
      <ReactStripMenu
        fadeInMode="fade"
        wrapperStyle={{
          transformOrigin: "0 0",
          background: "rgba(10, 10, 10, 1)",
          mixBlendMode: "normal",
          top: "50px",
          color: "#ffffff",
          border: "solid rgba(255, 255, 255, 0.2) 0.5px",
          borderRadius: "12px",
          overflow: "hidden",
          boxShadow: "0 50px 100px rgba(50, 50, 93, 0.1)",
        }}
        dropdowns={[
          <Box sx={{ width: "100px", height: "100px", color: "red" }}>D</Box>,
          <Box sx={{ width: "200px", height: "200px", color: "red" }}>DDD</Box>,
          <Box sx={{ width: "300px", height: "300px", color: "red" }}>
            DDDDD
          </Box>,
        ]}
      >
        <Box textAlign={"center"} width="100px">
          A
        </Box>
        <Box textAlign={"center"} width="100px">
          B
        </Box>
        <Box textAlign={"center"} width="100px">
          C
        </Box>
      </ReactStripMenu>
    </Flex>
  </React.StrictMode>
);

run command to view demo