Smartzi UI

An UI Component Library Created by Smartzi.

Table of Contents

• Carousel Component
  • Features
  • Installation
  • Importing
    • For React App
    • For Next App
  • Usage
  • Props
  • Styling
  • Dependencies
• Button Component
  • Features
  • Installation
  • Importing
  • Usage
  • Props
  • Styling
  • Dependencies
• DropdownText Component
  • Features
  • Installation
  • Importing
  • Usage
  • Props
  • Styling
  • Dependencies

Carousel Component

A customizable Carousel component for React applications.

Features

• Dynamically display a list of items in a carousel format.
• Customizable background color, text color, wrapper height, and icon for each slide.
• Auto-scroll functionality with adjustable interval duration.
• Responsive design compatible with various screen sizes.
• Optional back bar with customizable color and angle for additional styling.

Installation

Install the Carousel component via npm:

npm install smartziui

Importing

Due to rendering methods, React and Next have some conflicts in using the Carousel Component. Further discussion will be mentioned under the "Next App usage" section.

For React App

import Carousel from "smartziui";

For Next App

In Next.js apps, a normal import will cause a Document is not defined error. To overcome this, we have to import our Carousel Component for client-side rendering only. The reason is that we use the document object to get the browser dimension to increase compatibility with the user's browser. However, in server-side rendering, the browser window isn't available.

import dynamic from "next/dynamic";
const Carousel = dynamic(
  () => import("smartziui").then((mod) => mod.Carousel),
  {
    ssr: false,
  }
);

Usage

Here is a basic example of how to use the Carousel component:

import React from 'react';
import Carousel from 'smartziui'; // Consider that Next.js import will be another method which mentioned above.

const App = () => {
  const scrollContent = [
    'First item', 'Second item', 'Third item'
  ];

  return (
    <Carousel
      scrollContent=scrollContent,
      intervalDuration={3000},
      bgColor="#3FA535",
      textColor="#FFFFFF",
      WrapperHeight={50},
      icon="<i class='bi bi-star-fill'></i>",
      iconWidth={20},
      scrollerId={0},
      backBar=true,
      backBarColor="#27205B",
      backBarAngle="-2"
    />
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------------------ | -------- | ---------------------------------- | ----------------------------------------------------------------- | | scrollContent | string[] | ['first item', 'second item', ...] | Array of strings to display in the carousel. | | intervalDuration | number | 3000 | Duration (in milliseconds) before transitioning to the next item. | | bgColor | string | "#3FA535" | Background color of the carousel wrapper. | | textColor | string | "#FFFFFF" | Text color for the content in the carousel. | | WrapperHeight | number | 50 | Minimum height of the carousel wrapper in pixels. | | icon | string | "" | HTML string for an icon to display before the text. | | iconWidth | number | 20 | Font size for the icon in pixels. | | scrollerID | number | 0 | Only needed while using multiple carousels in one app. | | backBar | boolean | true | Enable or disable the back bar behind the carousel. | | backBarColor | string | "#27205B" | Background color of the back bar. | | backBarAngle | string | "-2" | Rotation angle of the back bar in degrees. |

Styling

The Carousel component uses Bootstrap classes for styling and layout. You can override these styles by writing your own CSS rules. Ensure to import Carousel.css in your project for custom styles.

Dependencies

• React
• Bootstrap (for styling and responsive design)
• html-react-parser (to parse strings into HTML elements)

Button Component

A customizable Button component for React applications.

Features

• Customizable label and variant (e.g., primary, secondary, success, etc.).
• Simple implementation for adding buttons with different styles throughout the application.
• Scalable and reusable for various button requirements in a project.

Installation

Install the Button component via npm:

npm install smartziui

Importing

Import the Button component in your React application:

import Button from "smartziui/Button";

Usage

Here is a basic example of how to use the Button component:

import React from 'react';
import Button from 'smartziui/Button';

const App = () => {
  return (
    <Button label="Click me" varient="primary" />
  );
}

export default App;

Props

| Prop | Type | Default | Description | | --------- | ------ | ------- | --------------------------------------------------- | | label | string | "Button" | Text to display on the button. | | variant | string | "primary" | Variant style of the button (e.g., primary, secondary, success, etc.). |

Styling

The Button component uses its own CSS file for styling. You can customize the button styles by modifying the Button.css file in your project.

Dependencies

• React
• PropTypes (for prop validation)

DropdownText Component

A customizable DropdownText component for React applications.

Features

• Display a collapsible dropdown list with a parent and child items.
• Customizable parent text, child list, text color, and number of items displayed before scrolling.
• Simple implementation for creating dropdowns with various content.

Installation

Install the DropdownText component via npm:

npm install smartziui

Importing

Import the DropdownText component in your React application:

import DropdownText from "smartziui/DropdownText";

Usage

Here is a basic example of how to use the DropdownText component:

import React from 'react';
import DropdownText from 'smartziui/DropdownText';

const App = () => {
  return (
    <DropdownText Parent="Parent" childList={["child1","child2","child3","child4"]} textColor="black" scrollOver={3} />
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ----------- | ------ | ------------- | ---------------------------------------------------------- | | Parent | string | "Parent" | Text displayed for the parent item in the dropdown. | | childList | array | ["child1",...] | Array of strings representing the child items in the dropdown. | | textColor | string | "black" | Text color for both the parent and child items. | | scrollOver| number | 3 | Number of items displayed before scrolling in the dropdown. |

Styling

The DropdownText component uses its own CSS file for styling. You can customize the dropdown styles by modifying the DropdownText.css file in your project.

Dependencies

• React
• PropTypes (for prop validation)