react-elements-lib v0.0.9

React Elements Lib

React Elements Lib is a customizable React component library built with Tailwind CSS, offering a range of commonly used UI components such as Header, Footer, Spinner, Toast notifications, Date Picker, and more. It’s designed to help developers create beautiful, consistent UIs quickly and efficiently.

Table of Contents

• Installation
• Getting Started
• Components
  • Header
  • Footer
  • Spinner
  • Toast
  • Date Picker
• Contributing
• License

Installation

To install React Elements Lib, use npm:

npm install react-elements-lib

You also need to install Tailwind CSS in your project if you haven’t already:

npm install tailwindcss
npx tailwindcss init

Then, add the following to your Tailwind CSS configuration in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        "nexcade-blue": "#1E3A8A",
        "nexcade-green": "#00BFA6",
        "nexcade-red": "#FF5A5F",
        "nexcade-yellow": "#FFC72C",
        "nexcade-gray": "#F5F5F5",
      },
    },
  },
  variants: {},
  plugins: [],
};

Getting Started

Import the components you need from react-elements-lib and start using them in your project. Each component is designed to be customizable with props.

import { Header, Footer, Spinner, ToastContainer } from "react-elements-lib";

function App() {
  return (
    <div>
      <Header />
      <Spinner size="md" color="text-blue-500" />
      <ToastContainer position="top-right" />
      <Footer />
    </div>
  );
}

Components

Header

The Header component includes a logo, navigation links, and an optional button.

import { Header } from "react-elements-lib";

const navLinks = [
  { label: "Home", href: "/" },
  { label: "Components", href: "/components" },
  { label: "Docs", href: "/docs" },
];

<Header
  logoSrc="/logo.png"
  links={navLinks}
  buttonLabel="Sign Up"
  onButtonClick={() => alert("Button clicked!")}
/>;

Props

Footer

The Footer component includes navigation links, social media icons, and copyright information.

Usage

import { Footer } from "react-elements-lib";

const socialLinks = [
  { label: "Facebook", href: "https://facebook.com", icon: <FiFacebook /> },
  { label: "Twitter", href: "https://twitter.com", icon: <FiTwitter /> },
];

<Footer
  links={navLinks}
  socialLinks={socialLinks}
  copyright="© 2024 MyLibrary"
/>;

Props

Spinner

The Spinner component displays a loading spinner with customizable size and color.

Usage

import { Spinner } from "react-elements-lib";

<Spinner size="lg" color="text-blue-500" />;

Props

Toast

The ToastContainer component manages temporary notifications that appear and disappear automatically.

Usage

import { ToastContainer } from "react-elements-lib";

<ToastContainer position="top-right" />;

Props

Date Picker

The DatePicker component supports single and range date selection.

Usage

import { DatePicker } from "react-elements-lib";

<DatePicker isRange={false} onSelect={(date) => console.log(date)} />;

Props

Contributing

Contributions are welcome! Please open an issue or submit a pull request with your improvements or bug fixes.

License

This project is licensed under the MIT License.

This README gives an overview of React Elements Lib, covering installation, component usage, props, and example code snippets to help users get started. Feel free to modify and expand it as your component library grows.