component-lib-elite v0.1.5

Elite NPM Component Library

This repository contains the code for the Elite NPM package

List of components to use:

• Button
• Navbar
• Modal

To use the library:

1. Install the package via npm i component-lib-elite
2. Import the component you want to use, eg. import { Button } from "component-lib-elite";

Button Component

The button can accept the following props:

import { Button } from "component-lib-elite";

function App() {
  return (
    <div className="App">
      <Button
          label="My label"
          bgColor="blue"
          onClickHandler={() => console.log("HELLO")}
          paddingX={30}
          paddingY={30}
          textSize={30}
      />
    </div>
  );
}

export default App;

The Navbar Component

The Navbar can accept the following props:

import { Navbar } from "component-lib-elite";

function App() {
  const listOfLinks = [
    {
      linkName: "Home",
      linkUrl: "/"
    },
    {
      linkName: "Contact",
      linkUrl: "/contact"
    },
    {
      linkName: "About",
      linkUrl: "/about"
    }
  ]
  return (
    <div className="App">
       <Navbar
        menuList={listOfLinks}
        navbarHeight="70px"
        navbarBgColor="blue"
        brandName="Elite"
        navLinksSize={20px}
      />
    </div>
  );
}

export default App;

The Modal Component

The Modal can accept the following props:

import { Modal } from "component-lib-elite";
import { useState } from "react"

function App() {
  const [modal, setModal] = useState(false)
  return (
    <div className="App">
      <button onClick={() => setModal(true)}>Open Modal</button>
      <Modal
        isOpen={modal} //required
        toggle={setModal} //required
        contentBgColor="blue"
        headerText="Elite Header"
        headerTextColor={"#000"}
      >
        <div>The content to show in the Modal</div>
      </Modal>
    </div>
  );
}

export default App;