ui-grape

Ui react project: A library comprised of all the useful components with dynamic options!

Installation

npm install ui-grape

Components

1. Toast

import { Toast } from 'ui-grape';
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';

Toast Usage

The Toast component allows you to create simple toast notifications. Here's an example of how you can use it:

      <Toast
        message="This toast will stay for 5 seconds."
        duration={5000}
        type="warning"
        position="bottom-right"
        padding="medium"
        fontColor="#ff9800"
      />

In this example:

• The first toast is a basic notification.
• The second toast includes a success icon.
• The third toast is customized with a longer duration, a warning type, a specific position and a larger padding. Adjust the props according to your requirements and styling preferences.

2. Tab

import { Tab } from 'ui-grape';

Tab Usage

The Tab component provides a simple and customizable tab interface. Here's an example of how you can use it:

  const tabs = [
    {
      label: 'Tab 1',
      content: "This is Tab 1",
      badgeCount: 0,
      errorBadge: false
    },
    {
      label: 'Tab 2',
      content: "This is Tab 2",
      badgeCount: 0,
      errorBadge: false
    },
    {
      label: 'Tab 3',
      content: "This is Tab 3",
      badgeCount: 0,
      errorBadge: false
    }
  ];

  <Tab tabs={tabs} />

In this example:

the Tab component is used to create a tab interface with three tabs, each with its own label, content, badge count, and error badge status.

3. Card

import { Card } from 'ui-grape';

Card Usage

The Card component allows you to create simple cards. Here's an example of how you can use it:

import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';

      <Card 
        children="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
        icon= {faCheckCircle} 
        type= 'success'
        width= '300px'
        heading= "Card with icon"
      />

4. Button

import { Button } from 'ui-grape';

Button Usage

The Button component allows you to create simple Buttons. Here's an example of how you can use it:

import { faBell } from '@fortawesome/free-solid-svg-icons';

      <Button 
        children= 'Ui Grape Button'
        rightIcon= {faBell}
        type= 'danger'
        size= 'small'
      />

5. Modal

import { Modal } from 'ui-grape';

Modal Usage

The Modal component allows you to create simple Modals. Here's an example of how you can use it:

import { faCheck, faBell } from '@fortawesome/free-solid-svg-icons';

const children = <div>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                  <br/>
                  <button>Test</button>
                 </div>;

      <Button 
        {
          heading= 'Modal screen 1'
          children= {children}
          buttonRight= {
            children: 'Forward',
            rightIcon: faCheck,
            type: 'success',
            size: 'small'
          }
          buttonLeft= {
            children: 'cancel',
            type: 'danger',
            size: 'small'
          }
          icon= {faBell},
          type= 'primary',
          width= "500px",
          onClose: () => null
      />

6. Menu

The Menu component provides a flexible and customizable menu interface.

import { Menu } from 'ui-grape';

Menu Usage

Import the Menu component and FontAwesome icons in your project:

import React from 'react';
import { Menu } from 'ui-grape';
import { faHome, faUser, faCog } from '@fortawesome/free-solid-svg-icons';

const BasicMenu = () => {
  const menuItems = [
    { label: 'Home', icon: faHome, onClick: () => console.log('Home clicked') },
    { label: 'Profile', icon: faUser, onClick: () => console.log('Profile clicked') },
    { label: 'Settings', icon: faCog, onClick: () => console.log('Settings clicked') },
    { label: 'Open', onClick: () => console.log('Open clicked') },
  ];

  return <Menu items={menuItems} />;
};

export default BasicMenu;

Customized Menu

import React from 'react';
import { faHome, faUser, faCog, faFolder, faChartBar, faEnvelope } from '@fortawesome/free-solid-svg-icons';

const CustomMenu = () => {
  const menuItems = [
    { label: 'Home', icon: faHome, onClick: () => console.log('Home clicked') },
    { label: 'Profile', icon: faUser, onClick: () => console.log('Profile clicked') },
    { label: 'Settings', icon: faCog, onClick: () => console.log('Settings clicked') },
    { label: 'Documents', icon: faFolder, onClick: () => console.log('Documents clicked') },
    { label: 'Analytics', icon: faChartBar, onClick: () => console.log('Analytics clicked') },
    { label: 'Messages', icon: faEnvelope, onClick: () => console.log('Messages clicked') },
  ];

  return <Menu items={menuItems} size="medium" />;
};

export default CustomMenu;

Adjust the menuItems array according to your requirements, and customize the menu appearance using props like size.

Props

• items: An array of objects representing menu items. Each object should have a label (string), an optional icon (FontAwesomeIcon), and an optional onClick function.

• size (optional): Size of the menu items. It can be set to 'small' or 'medium'.