esewa-ui-library

UI Library for eSewa Mini App

Install

npm install --save esewa-ui-library

Usage

Import style file in your project:

import 'esewa-ui-library/dist/index.css';

Components

Import and use components in your project:

import { ESewaButton } from 'esewa-ui-library';
const App = () => {
  return <ESewaButton>Click Me</ESewaButton>;
};
export default App;

Available Components

• AlertCard: ESewaAlertCard
• AppBar: ESewaAppBar
• Button: ESewaButton
• Card: ESewaCard
• Carousel: ESewaCarousel
• Checkbox: ESewaCheckbox
• Chipgroup: ESewaChipGroup
• Datepicker: ESewaDatepicker
• Dialog: ESewaDialog
• Divider: ESewaDivider
• FullPageLoadingScreen: EsewaFullPageLoadingScreen
• Grid: ESewaGrid, ESewaGridItem
• Icon: ESIcon
• Image: ESewaImage
• InputField: ESewaInputField
• InputFieldTextArea: ESewaInputFeildTextArea
• MultiSelect: ESewaMultiSelect
• NepaliDatepicker: ESewaNepaliDatepicker
• Radio: ESewaRadio
• Select: ESewaSelectNative
• Skeleton: ESewaSkeleton
• Tag: ESewaTag
• Tooltip: ESewaTooltip

ESewaAlertCard

The ESewaAlertCard component is used to display alert messages with different variants, optional icons, dismiss buttons, and action buttons.

Usage:

import { ESewaAlertCard } from 'esewa-ui-library';

const App = () => {
  return (
    <ESewaAlertCard
      variant="warning"
      title="Warning Alert"
      description="This is a warning alert"
      titleIcon="fa fa-exclamation-circle"
      showDismissIcon={true}
      dismissIcon="fa fa-times"
      onDismiss={() => alert('Dismiss clicked')}
      showCardFooter={true}
      buttonLabel="Action"
      buttonOnClick={() => alert('Action clicked')}
    />
  );
};

export default App;

Props:

| Prop Name | Type | Default | Description | |----------------------|--------------------------------------------------|-------------|-------------| | alertCardClass | string | '' | Additional class for custom styling | | variant | 'primary' | 'warning' | 'danger' | 'info' | 'primary' | Determines the alert style | | title | string | undefined | Title of the alert | | description | string | undefined | Alert description text | | descriptionIcon | string | React.ReactNode | undefined | Icon class for the description | | showDescriptionIcon | boolean | false | Whether to show the description icon | | titleIcon | string | React.ReactNode | undefined | Icon class for the title | | dismissIcon | string | React.ReactNode | undefined | Icon class for the dismiss button | | showDismissIcon | boolean | false | Whether to show the dismiss button | | onDismiss | () => void | undefined | Callback function when dismiss button is clicked | | showCardFooter | boolean | false | Whether to show the footer section | | buttonLabel | string | undefined | Label for the action button | | buttonOnClick | () => void | undefined | Callback function when the action button is clicked |

ESewaAppBar

The ESewaAlertCard component is customizable app bar for your eSewa Mini App with support for back, title, and action icons, making navigation and interactions seamless.

Use useESewaDataProvider to set title for appbar.

Usage:

import { ESewaAppBar, useESewaDataProvider } from 'esewa-ui-library';

const App = () => {
  const { updateData } = useESewaDataProvider();

  useEffect(() => {
      updateData({
        title: "Merchant Product Form",
      });
    }, []);

  return (
    <ESewaAppBar 
      icon="icon-es-arrow-left"
      titleposition="left"
      onBackIconClick={() => console.log('Back icon clicked')}
      onTitleClick={() => console.log('Title clicked')}
      onActionIconClick={() => console.log('Action icon clicked')}
      actionIcon="icon-settings"
    />
  );
};

export default App;

Props:

| Prop Name | Type | Default | Description | |-----------------------|---------------------------|----------|-------------| | title | string | any | undefined | Title to display in the app bar | | icon | string| React.ReactNode| 'icon-back' | Icon to display as the back button | | imageUrl | string | undefined | Image URL to display next to the title | | onBackIconClick | () => void | () => {} | Callback for the back icon click event | | onTitleClick | () => void | () => {} | Callback for the title click event | | onActionIconClick | () => void | () => {} | Callback for the action icon click event | | onClick | () => void | () => {} | Callback for the entire app bar click event | | className | string | undefined | Additional class for custom styling | | titleposition | 'left' | 'center' | 'right' | 'center' | Position of the title within the app bar | | actionIcon | string| React.ReactNode| undefined | Icon for the action button on the right side of the app bar |

ESewaButton

ESewaButton is a highly customizable button component built with React and styled using styled-components. It supports multiple variants, sizes, icon placement, and other button properties for flexible UI design.

Usage:

import { ESewaButton } from 'esewa-ui-library';

const App = () => {
  return (
    <ESewaButton 
      type="button"
      variant="primary"
      onClick={handleClick}
      disabled={false}
      outlined={false}
      fullwidth={true}
      icon="icon-class"
      iconPlacement="start"
      size="large"
      textTransform="uppercase"
    >
      Click Me
    </ESewaButton>
  );
};

export default App;

Props:

| Name | Type | Default | Description | |----------------|---------------------------|-------------|--------------------------------------------------------------------------------------------------------------| | type | 'button' | 'submit' | 'reset' | 'button' | Specifies the type of the button. Options include button, submit, or reset. | | variant | 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'text' | 'default' | Specifies the variant style of the button. Choose from primary, secondary, danger, success, warning, info, or text. | | onClick | (e: any) => void | undefined | The function to execute when the button is clicked. | | children | React.ReactNode | undefined | The content of the button, typically text or icons. | | disabled | boolean | false | Disables the button if set to true. | | outlined | boolean | false | If true, the button will have an outline style. | | className | string | '' | Additional CSS class(es) to apply to the button. | | fullwidth | boolean | false | If true, the button will span the full width of its container. | | icon | string| React.ReactNode| `

Styling and Customization

Button Size

You can customize the button size using the size prop. The available sizes are:

• large: Large button with more padding.
• medium: Default button size.
• small: Compact button with smaller padding.

Button Variants

The button supports various color variants that you can use by specifying the variant prop:

• primary: The main action button style.
• secondary: A secondary action style.
• danger: A button to signify danger or warning actions.
• success: For success actions.
• warning: For warning actions.
• info: A button for informational actions.
• text: A text-only button with no background.

Icon Customization

You can add icons to your button using the icon prop. The icon will be displayed inside the button either before or after the button text, depending on the iconPlacement prop.

• iconPlacement can be set to start (icon before text) or end (icon after text).
• Use the iconClass prop to apply a custom class to the icon for further customization.

Full Width Button

To make the button span the full width of its container, set the fullwidth prop to true.

Disabled Button

If you want to disable the button, set the disabled prop to true. The button will appear grayed out and will not be clickable.

Text Transform

You can control the text transformation of the button text using the textTransform prop. Available options are:

• uppercase: Converts the button text to uppercase.
• capitalized: Capitalizes the first letter of each word.

Example Usage

Basic Example

import React from 'react';
import { ESewaButton } from 'esewa-ui-library';

const App = () => {
  return (
    <div>
      <ESewaButton variant="primary" onClick={() => alert('Button clicked!')}>
        Primary Button
      </ESewaButton>
    </div>
  );
}

export default App;

ESewaCard Component

The ESewaCard component is a flexible and customizable card wrapper built with styled-components in React. It provides a container with background color, padding, and customizable border radius styles. You can use it to wrap content such as text, images, or other components to create a card-like layout.

The card supports various border radius values through the className prop. The ESewaCard component is lightweight and can be customized with different CSS variables.

Props

| Name | Type | Default | Description | |-------------|---------------------|-------------|--------------------------------------------------------------------------------------| | children | React.ReactNode | '' | The content inside the card. | | className | string | '' | Additional CSS class(es) to apply to the card. |

Styling and Customization

The ESewaCard component uses CSS variables for styling, which allows for easy customization of the card's background, padding, border radius, and more.

Border Radius Customization

You can customize the card's border radius by adding the appropriate className:

• border-radius-0: Border radius of var(--values-value-0)
• border-radius-2: Border radius of var(--values-value-2)
• border-radius-4: Border radius of var(--values-value-4)
• border-radius-6: Border radius of var(--values-value-6)
• border-radius-8: Border radius of var(--values-value-8)
• border-radius-10: Border radius of var(--values-value-10)
• border-radius-12: Border radius of var(--values-value-12)
• border-radius-14: Border radius of var(--values-value-14)
• border-radius-16: Border radius of var(--values-value-16)
• border-radius-round: Border radius of 50% (perfectly round card)

Default Styling

• Background color: var(--card-bg)
• Box-shadow: var(--shadow--1--umbra)
• Text color: var(--text-dark)
• Padding: var(--values-value-16)

Example Usage

Basic Example

import React from 'react';
import { ESewaCard } from 'esewa-ui-library';

const App = () => {
  return (
    <div>
      <ESewaCard>
        <h3>Card Content</h3>
        <p>This is a simple card with content inside.</p>
      </ESewaCard>
    </div>
  );
}

export default App;

Custom Border Radius Example

You can customize the border radius of the ESewaCard component by using different className values. Below is an example of how to apply a custom border radius to the card.

Example: Card with Border Radius 8

import React from 'react';
import { ESewaCard } from 'esewa-ui-library';

const App = () => {
  return (
    <div>
      <ESewaCard className="border-radius-8">
        <h3>Card with Border Radius 8</h3>
        <p>This card has a border radius of 8px.</p>
      </ESewaCard>
    </div>
  );
}

export default App;

ESewaCarousel

ESewaCarousel is a flexible and customizable carousel component built with React and styled-components. It supports both horizontal and vertical scrolling, customizable item sizes, and various features such as autoplay, navigation, and indicators.

Features

• Supports horizontal and vertical directions.
• Ability to display scrollbars and customize their visibility.
• Navigation buttons to scroll through items.
• Autoplay functionality with configurable intervals.
• Indicators to show the active item.
• Customizable width and height for carousel items.
• Responsive adjustments for smaller screens.

Props

| Prop | Type | Default Value | Description | |---------------------|--------------------------------|----------------|---------------------------------------------------------------------------------------------------| | items | React.ReactNode[] | [] | Array of items to display in the carousel. | | direction | 'horizontal' \| 'vertical' | 'horizontal' | Defines the direction of scrolling (horizontal or vertical). | | itemWidth | string | '200px' | Custom width of each item in the carousel. | | itemHeight | string | '200px' | Custom height of each item in the carousel. | | showScrollbar | boolean | false | Whether to display the scrollbar in the carousel. | | showIndicator | boolean | true | Whether to display the carousel indicators. | | visibleItems | number | undefined | Number of items to display at once in the carousel. | | showNav | boolean | false | Whether to show left and right navigation buttons. | | autoplay | boolean | false | Whether the carousel should autoplay. | | autoplayInterval | number | 3000 | Interval for autoplay in milliseconds (default 3000ms). |

Styling

The ESewaCarousel component is styled using styled-components. The component is fully customizable, and you can adjust the appearance by modifying the following properties in the CSS:

• background-color for items (--card-bg)
• color for text (--body-color)
• Customizable scrollbar styles (.carousel-wrapper.show-scrollbar).

Example Usage

Horizontal Carousel

import React from 'react';
import { ESewaCarousel } from 'esewa-ui-library';

const items = [
  <div>Item 1</div>,
  <div>Item 2</div>,
  <div>Item 3</div>
];

const App = () => {
  return (
    <ESewaCarousel 
      items={items} 
      direction="horizontal" 
      itemWidth="250px" 
      itemHeight="200px" 
      showScrollbar 
      showNav 
      showIndicator 
      autoplay 
      autoplayInterval={4000}
    />
  );
}

export default App;

ESewaCheckbox Component

The ESewaCheckbox component is a fully customizable checkbox built with React and styled using styled-components. It provides support for labels, disabled states, custom change handling, and additional styling flexibility through props.

Features

• Customizable checkbox: Allows the user to easily customize the checkbox with a label.
• Change handling: Provides an onChange callback to handle state changes.
• Disabled state: Supports disabling the checkbox.
• Custom styling: Supports custom class names and additional styling flexibility via props.

Usage

Basic Usage

To use the ESewaCheckbox component, import it and pass the necessary props to it.

import { ESewaCheckbox } from 'esewa-ui-library';

const MyComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (checked: boolean) => {
    setIsChecked(checked);
  };

  return (
    <ESewaCheckbox 
      label="I agree to the terms" 
      checked={isChecked} 
      onChange={handleChange} 
    />
  );
};

Props

| Prop | Type | Default Value | Description | |---------------|-------------|---------------|---------------------------------------------------| | label | string? | undefined | The label text for the checkbox. | | onChange | (checked: boolean) => void? | undefined | Callback function to handle checkbox state change. | | checked | boolean? | false | The checked state of the checkbox. | | labelClass | string? | '' | Class name for styling the label. | | className | string? | '' | Custom class name for the checkbox container. | | disabled | boolean? | false | If true, disables the checkbox.

ESewaChipGroup Component

Overview

The ESewaChipGroup component is a customizable chip group component built with React and styled-components. It allows you to display a set of chips with selectable options. You can choose between single or multiple selection modes, with customizable styles and optional icons.

Props

| Prop | Type | Default Value | Description | |-----------------|---------------------------------|---------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| | selection | 'single' \| 'multiple' | Required | Specifies the selection mode: 'single' for single selection, 'multiple' for multiple selection. | | required | boolean? | false | If true, ensures that at least one chip is selected when the selection mode is 'multiple'. | | chips | ChipProps[] | Required | An array of chips to display. Each chip includes a text label, an optional icon, and an ID. | | className | string? | '' | Optional custom class name for styling the chip container. | | onChange | (selected: number[] | number) => void? | undefined | Callback function to handle chip state change. |

ESewaDatePicker

A customizable and accessible date picker component for React, built using styled-components.

Features

• Customizable label with a required indicator.
• Supports min and max date restrictions.
• Supports readOnly and disabled states.
• Displays validation messages when needed.
• Automatically focuses on the input when autoFocus is enabled.
• Styled using styled-components.

Usage

Basic Example

import React, { useState } from "react";
import { ESewaDatePicker } from 'esewa-ui-library';

const App = () => {
  const [date, setDate] = useState("");

  return (
    <div>
      <ESewaDatePicker
        label="Select Date"
        name="date"
        value={date}
        onChange={(e) => setDate(e.target.value)}
        required
      />
    </div>
  );
};

export default App

Example with Validation, Min & Max Dates

import React, { useState } from "react";
import { ESewaDatePicker } from 'esewa-ui-library';

const App = () => {
  const [date, setDate] = useState("");

  return (
    <div>
      <ESewaDatePicker
        label="Start Date"
        name="startDate"
        value={date}
        onChange={(e) => setDate(e.target.value)}
        min="2023-12-01"
        max="2024-12-31"
        validationMessage="Please select a valid date."
        required
      />
    </div>
  );
};

export default App;

Props

| Prop Name | Type | Default | Description | |--------------------|-------------------------------------------|-----------|-------------| | id | string | undefined | ID for the input field. | | name | string | undefined | Name attribute for the input field. | | label | string | undefined | Label text displayed above the input field. | | value | string | undefined | Selected date value (in YYYY-MM-DD format). | | min | string | undefined | Minimum selectable date (in YYYY-MM-DD format). | | max | string | undefined | Maximum selectable date (in YYYY-MM-DD format). | | required | boolean | false | Marks the field as required. | | readOnly | boolean | false | Makes the input read-only. | | disabled | boolean | false | Disables the input field. | | className | string | "" | Additional class names for styling. | | validationMessage| string | undefined | Displays an error message below the input. | | autoFocus | boolean | false | Automatically focuses on the input when mounted. | | onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | undefined | Callback function triggered on date change. |

ESewaDialog Component

Usage

The ESewaDialog component is a modal dialog used to display content with options like OK and Cancel actions. You can customize the dialog's appearance, positioning, and button texts.

Example:

import React, { useState } from 'react';
import { ESewaDialog } from 'esewa-ui-library';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openDialog = () => setIsOpen(true);
  const closeDialog = () => setIsOpen(false);
  const handleOk = () => {
    console.log('OK button clicked');
    closeDialog();
  };

  return (
    <div>
      <button onClick={openDialog}>Open Dialog</button>

      {
        isOpen && (<ESewaDialog
          isOpen={isOpen}
          title="Sample Dialog"
          okText="Confirm"
          cancelText="Cancel"
          onOk={handleOk}
          onCancel={closeDialog}
          position="center"
        >
          <p>Dialog content goes here.</p>
        </ESewaDialog>)
      }
    </div>
  );
};

export default App;

Props

| Prop Name | Type | Default | Description | |----------------------|------------------------------------------------------------|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------| | isOpen | boolean | false | Controls the visibility of the dialog. | | showLeftIcon | boolean | false | Whether to show the left icon in the dialog header. | | leftIcon | string | React.ReactNode | 'icon-es-check' | The icon class to be displayed in the left side of the dialog header. | | showCloseIcon | boolean | false | Whether to show the close icon in the dialog header. | | closeIcon | string | 'icon-es-close' | The icon class for the close button. | | okText | string | 'OK' | The text to be displayed on the OK button. | | cancelText | string | 'Cancel' | The text to be displayed on the Cancel button. | | title | string | undefined | The title of the dialog. | | children | React.ReactNode | undefined | The content to be displayed in the body of the dialog. | | onOk | () => void | undefined | The callback function for the OK button click event. | | onCancel | () => void | () => {} | The callback function for the Cancel button click event or clicking outside the dialog. | | position | 'center' | 'top' | 'bottom' | 'bottom' | The position of the dialog on the screen. Can be center, top, or bottom. | | disableSubmitButton| boolean | false | Whether the OK button should be disabled.
|

ESewaDivider Component

The ESewaDivider component is a customizable divider line that can be used to separate content in your React application. You can customize the color, thickness, width, margin, and style (dotted or solid) of the divider.

Usage

To use the ESewaDivider, simply import it into your React component and include it in your JSX. You can customize the divider's appearance using the available props.

Basic Usage

import React from 'react'
import { ESewaDivider } from 'esewa-ui-library';

const MyComponent = () => {
  return (
    <div>
      <p>Content above the divider</p>
      <ESewaDivider />
      <p>Content below the divider</p>
    </div>
  )
}

Props

The ESewaDivider component accepts the following props to customize its appearance:

| Prop | Type | Default Value | Description | |--------------|----------|------------------|---------------------------------------------------------------------------------------------------| | color | string | 'var(--border)' | The color of the divider. You can specify any valid CSS color value. | | thickness | string | '1px' | The thickness of the divider. You can specify the value in px, em, rem, etc. | | width | string | '100%' | The width of the divider. You can specify a percentage, px, em, rem, etc. | | margin | string | '8px 0' | The margin around the divider. You can specify the margin in px, em, rem, etc. | | className | string | '' (optional) | A custom CSS class for additional styling. | | dotted | boolean| false | If true, the divider will be styled with a dotted line (dashed style). Otherwise, it is solid. |

Example

<ESewaDivider 
  color="blue" 
  thickness="2px" 
  width="50%" 
  margin="10px 0" 
  dotted 
/>

In this example, the divider will be blue, 2px thick, 50% wide, with 10px margin on top and bottom, and have a dotted line style.

Full Page Loading Component

The EsewaFullPageLoadingScreen component provides a full-page loading screen with a loading animation consisting of animated dots and an optional text message.

Usage

You can use the EsewaFullPageLoadingScreen component to show a loading screen with animated dots.

Example Usage

import React from 'react';
import { EsewaFullPageLoadingScreen } from 'esewa-ui-library';

const App = () => {
  return (
    <div>
      {/* Display loading screen with a custom message */}
      <EsewaFullPageLoadingScreen text="Loading, please wait..." />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default Value | Description | |--------|---------|---------------|-------------------------------------------------------------------------------------------------------| | text | string | undefined | Custom loading text that will be displayed next to the animated dots. If not provided, no text will be shown. |

ESewaGrid & ESewaGridItem Component

Overview

The ESewaGrid and ESewaGridItem components are used to create flexible grid layouts with a 12-column grid system. The ESewaGrid serves as the container for the grid, and the ESewaGridItem allows you to define the column span for individual items within the grid.

Usage

The ESewaGrid component is used to create a 12-column grid layout. You can use ESewaGridItem to define the number of columns an item will span within the grid.

Example

import { ESewaGrid, ESewaGridItem } from './esewa-ui-library';

const Example = () => {
  return (
    <ESewaGrid>
      <ESewaGridItem colSpan={4}>Item 1</ESewaGridItem>
      <ESewaGridItem colSpan={8}>Item 2</ESewaGridItem>
      <ESewaGridItem colSpan={12}>Item 3</ESewaGridItem>
    </ESewaGrid>
  );
};

In the example above: Item 1 spans 4 columns.

Item 2 spans 8 columns.

Item 3 spans all 12 columns.

Props

ESewaGrid Props

| Prop | Type | Default Value | Description | |-----------|------------------|---------------|----------------------------------------------------------------------------| | children| React.ReactNode | Required | The content inside the grid container. | | className| string | '' | Custom class name for styling the grid container. |

ESewaGridItem Props

| Prop | Type | Default Value | Description | |-----------|--------------------------------------------------------|---------------|-----------------------------------------------------------------------------| | colSpan | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Required | Defines the number of columns the grid item will span (from 1 to 12). | | children| React.ReactNode | Required | The content inside the grid item. | | className| string | '' | Custom class name for styling the grid item. |

Example: ESewaGrid with All Column Spans

Example: Usage of All Column Spans

In this example, we use all possible column spans (from 1 to 12) to demonstrate how ESewaGrid and ESewaGridItem work:

import { ESewaGrid, ESewaGridItem } from './esewa-ui-library'

const Example = () => {
  return (
    <ESewaGrid>
      <ESewaGridItem colSpan={1}>Item 1 (1 Column)</ESewaGridItem>
      <ESewaGridItem colSpan={2}>Item 2 (2 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={3}>Item 3 (3 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={4}>Item 4 (4 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={5}>Item 5 (5 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={6}>Item 6 (6 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={7}>Item 7 (7 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={8}>Item 8 (8 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={9}>Item 9 (9 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={10}>Item 10 (10 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={11}>Item 11 (11 Columns)</ESewaGridItem>
      <ESewaGridItem colSpan={12}>Item 12 (12 Columns)</ESewaGridItem>
    </ESewaGrid>
  )
}

ESIcon Component

The ESIcon component is a customizable icon component built using styled-components and CSS variables. It allows you to display an icon from a font icon set and customize its size and colors.

Basic Example

import React from "react";
import { ESIcon } from './esewa-ui-library'

const App = () => {
  return (
    <div>
      <ESIcon icon="home" size={40} iconPrimaryColor="blue" iconSecondaryColor="gray" />
      <ESIcon icon="settings" size={30} iconPrimaryColor="green" />
    </div>
  );
};

export default App;

Example with Custom Colors and Size, Multiple Icons

In this example, we render multiple icons with custom sizes and colors.

import React from "react";
import { ESIcon } from './esewa-ui-library'

const App = () => {
  return (
    <div>
      <ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />
      <ESIcon icon="user" size={32} iconPrimaryColor="purple" />
      <ESIcon icon="cart" size={48} iconPrimaryColor="orange" iconSecondaryColor="black" />
    </div>
  );
};

export default App;

ESIcon Component Props

| Prop | Type | Default | Description | |---------------------|----------------------------------|-----------|--------------------------------------------------------------------| | icon | string | - | The name of the icon to display. This should be the icon class name (e.g., search, user, etc.). | | size | number | 28 | The size of the icon in pixels. | | iconPrimaryColor | string | undefined | The primary color of the icon. If not provided, the default color is used. | | iconSecondaryColor| string | undefined | The secondary color of the icon. If not provided, the default color is used. |

Usage Example:

<ESIcon icon="search" size={50} iconPrimaryColor="red" iconSecondaryColor="yellow" />

ESewaImage Component

ESewaImage is a React component that handles lazy-loading, error handling, and image preview in a modal. It provides functionality for images to be lazy-loaded when they enter the viewport, with a fallback image in case of error. It also allows the user to click on the image to open a larger preview in a modal.

Features:

• Lazy Loading: Image is loaded only when it is about to enter the viewport.
• Error Handling: If the image fails to load, a fallback image is used.
• Image Preview: Clicking the image opens it in a modal view.
• Customizable Styles: Customize the width, height, and className of the image.

import { ESewaImage } from './esewa-ui-library'

<ESewaImage
  src="https://example.com/image.jpg"        // The source URL for the image
  alt="Description of the image"             // Alt text for accessibility
  width="300"                                // Image width (can be string or number)
  height="200"                               // Image height (can be string or number)
  loading="lazy"                             // Lazy loading option (default is 'lazy')
  className="custom-class"                   // Optional custom class for styling
  fallbackSrc="https://example.com/fallback.jpg"  // Fallback image URL
/>

Props

The ESewaImage component accepts the following props:

| Prop | Type | Default Value | Description | |-----------------|---------------------------------------|-------------------|-----------------------------------------------------------------------------| | src | string | fallbackImage | The URL of the image to be displayed. | | alt | string | https:// | The alt text for the image (for accessibility). | | width | string | number | - | The width of the image (can be a string like '300px' or a number like 300). | | height | string | number | - | The height of the image (can be a string like '200px' or a number like 200). | | className | string | - | Optional custom CSS class for styling the image. | | fallbackSrc | string | fallbackImage | The URL for the fallback image if the primary image fails to load. | | loading | 'lazy' | 'eager' | 'lazy' | Determines the image loading strategy: 'lazy' or 'eager'. |

ESewaInputField Component

ESewaInputField is a customizable and reusable input field component for React. It supports various types of input fields (text, password, number, email, etc.) and comes with built-in validation messaging, styling, and accessibility features.

Usage

You can use the ESewaInputField component in your React application by following the steps below.

Basic Usage

import React, { useState } from 'react';
import { ESewaInputField } from './esewa-ui-library'

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <ESewaInputField
      type="text"
      label="Username"
      name="username"
      value={inputValue}
      onChange={handleChange}
      placeholder="Enter your username"
      required
      validationMessage="Username is required"
    />
  );
};

export default MyComponent;

Props

The ESewaInputField component accepts the following props:

| Prop | Type | Default | Description | |--------------------|-----------------------------------------------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | id | string | undefined | A unique identifier for the input field. | | type | 'text' | 'password' | 'number' | 'email' | 'date' | 'checkbox' | 'radio' | 'select' | 'textarea' | 'text' | The type of the input field. | | name | string | undefined | The name of the input field, used for form submissions. | | label | string | undefined | The label to display next to the input field. | | placeholder | string | undefined | The placeholder text displayed in the input field when it is empty. | | value | string | number | undefined | The current value of the input field. | | checked | boolean | undefined | Specifies whether the checkbox or radio button is checked (only applicable for checkbox and radio types). | | pattern | string | undefined | A regular expression that the input value must match (useful for email, password, etc.). | | min | number | undefined | The minimum value for number, date, or range input types. | | max | number | undefined | The maximum value for number, date, or range input types. | | step | number | undefined | The step value for number, date, or range input types. | | required | boolean | false | If true, the input field is required to be filled out before form submission. | | readOnly | boolean | false | If true, the input field is read-only, meaning the user cannot modify the value. | | disabled | boolean | false | If true, the input field is disabled, preventing user interaction. | | className | string | '' | A custom class name to apply to the input field's container. | | validationMessage| string | undefined | A validation message that is displayed when the input is invalid or doesn't meet the specified requirements. | | autoFocus | boolean | false | If true, the input field will automatically receive focus when the component is rendered. | | onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | undefined | A callback function that is called when the input value changes. The onChange function receives the change event as an argument. |

Notes:

• Some props are type-dependent. For example, min, max, and step are only relevant for number, range, or date input types.
• The required, readOnly, and disabled props affect user interaction with the input field.
• You can pass any additional attributes via the rest prop, which will be spread onto the underlying <input> element.

ESewaInputFeildTextArea Component

The ESewaInputFeildTextArea component is a styled text area input field with customizable properties for labels, validation, and more. It provides a clean and consistent design for text area fields in React applications.

Usage

Basic Example

import { ESewaInputFeildTextArea } from './esewa-ui-library'

const Example = () => {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value);
  };

  return (
    <ESewaInputFeildTextArea
      label="Your Message"
      value={value}
      onChange={handleChange}
      placeholder="Enter your message here"
      required
      validationMessage="Message is required"
    />
  );
};

With maxLength and rows

import { ESewaInputFeildTextArea } from './esewa-ui-library'

const Example = () => {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value);
  };

  return (
    <ESewaInputFeildTextArea
      label="Your Feedback"
      value={value}
      onChange={handleChange}
      placeholder="Enter your feedback here"
      maxLength={200}
      rows={5}
      required
      validationMessage="Feedback is required"
    />
  );
};

In this example, the ESewaInputFeildTextArea is used with a label, value, onChange, placeholder, and optional maxLength and rows properties. You can customize the component further as needed based on the provided props.

Props

| Name | Type | Default | Description | |-------------------|-----------------------------------|-------------|-----------------------------------------------------------------------------| | name | string | - | The name of the textarea element. | | label | string | - | The label text that is displayed above the textarea. | | placeholder | string | - | The placeholder text that appears when the textarea is empty. | | value | string \| number | - | The current value of the textarea. | | maxLength | number | - | The maximum number of characters allowed in the textarea. | | required | boolean | false | If true, the textarea becomes required when submitting the form. | | readOnly | boolean | false | If true, the textarea is set to read-only. | | disabled | boolean | false | If true, the textarea is disabled and cannot be interacted with. | | className | string | - | Additional CSS class name(s) for custom styling. | | rows | number | 3 | Defines the number of visible rows for the textarea. | | validationMessage| string | - | An optional message to display when validation fails. | | onChange | (e: ChangeEvent<HTMLTextAreaElement>) => void | - | Event handler function for handling text input changes. |

ESewaMultiSelect Component

The ESewaMultiSelect component is a customizable multi-select dropdown component built using React and styled-components. It allows users to select multiple options from a list, with a search feature and customizable styles.

Usage

To use the ESewaMultiSelect component in your React project, follow these steps:

1. Import the Component

First, import the ESewaMultiSelect component in your React file:

2.Define Options and State

Create an array of options that will be displayed in the multi-select dropdown. You also need to set up state to handle the selected items.

const [selectedItems, setSelectedItems] = useState([])

const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
  { value: '4', label: 'Option 4' }
]

3. Handle Selection Changes

Define a handler function that will be called whenever the selection changes.

const handleChange = (selected: Option[]) => { setSelectedItems(selected) }

4. Render the Component

Now you can render the ESewaMultiSelect component and pass in the necessary props:

<ESewaMultiSelect
  options={options}
  onChange={handleChange}
  placeholder="Select options"
/>

5. Display Selected Items

<div>
  <h3>Selected Items</h3>
  <ul>
    {selectedItems.map(item => (
      <li key={item.value}>{item.label}</li>
    ))}
  </ul>
</div>

Full Example

import React, { useState } from 'react'
import { ESewaMultiSelect } from './esewa-ui-library'

const MyComponent = () => {
  const [selectedItems, setSelectedItems] = useState([])

  const options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
    { value: '4', label: 'Option 4' }
  ]

  const handleChange = (selected: Option[]) => {
    setSelectedItems(selected)
  }

  return (
    <div>
      <ESewaMultiSelect
        options={options}
        onChange={handleChange}
        placeholder="Select options"
      />
      <div>
        <h3>Selected Items</h3>
        <ul>
          {selectedItems.map(item => (
            <li key={item.value}>{item.label}</li>
          ))}
        </ul>
      </div>
    </div>
  )
}

ESewaSelectNative Component

The ESewaSelectNative is a customizable select dropdown component built with React and styled using styled-components. It provides a native select element with additional features such as labels, validation messages, and optional full-width styling.

Usage

Here is an example of how to use the ESewaSelectNative component in your React application:

import React, { useState } from 'react';
import { ESewaSelectNative } from './esewa-ui-library'

const ExampleComponent = () => {
  const [selectedValue, setSelectedValue] = useState<string>('');

  const handleSelectChange = (value: string) => {
    setSelectedValue(value);
  };

  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' }
  ];

  return (
    <div>
      <ESewaSelectNative
        label="Select an Option"
        placeholder="Choose an option"
        options={options}
        value={selectedValue}
        onChange={handleSelectChange}
        required
        fullwidth
      />
    </div>
  );
};

Props

| Name | Type | Default | Description | |---------------------|--------------------|-----------|-----------------------------------------------------------------------------| | options | Options[] | [] | An array of objects representing the available options in the dropdown. | | placeholder | string | '' | Placeholder text shown when no option is selected. | | onChange | (value: string) => void | () => {} | A callback function triggered when an option is selected. | | label | string | undefined | The label displayed above the dropdown. | | value | string | undefined | The currently selected value in the dropdown. | | disabled | boolean | false | If true, disables the dropdown. | | validationMessage | string | undefined | A validation message that is displayed below the select field. | | required | boolean | false | If true, marks the field as required with an asterisk. | | fullwidth | boolean | false | If true, the dropdown will take the full width of its container. |

Options Type

Each option is represented by an object with the following properties:

| Name | Type | Description | |---------|--------|--------------------------------------------------------| | label | string | The label text displayed for the option. | | value | any | The unique value associated with the option. |

ESewaNepaliDatepicker Component

The ESewaNepaliDatepicker component is a React component for selecting a Nepali date using the nepali-datepicker-reactjs library. It allows users to select a date in Nepali format, and it also supports custom styling and locales.

Usage

Here is an example of how to use the ESewaNepaliDatepicker component in your React application:

import React, { useState } from 'react'
import { ESewaNepaliDatepicker } from './esewa-ui-library'

const App = () => {
  const [date, setDate] = useState<string>('')

  const handleDateChange = (newDate: string) => {
    setDate(newDate)
  }

  return (
    <div>
      <ESewaNepaliDatepicker
        label="Select Nepali Date"
        value={date}
        onChange={handleDateChange}
        calenderLocale="ne"  // You can use 'en' for English or 'ne' for Nepali locale
      />
    </div>
  )
}

export default App

Props

The ESewaNepaliDatepicker component accepts the following props:

| Prop Name | Type | Description | Default Value | |------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|----------------| | label | string | The label text to display above the date picker. | undefined | | className | string | Custom class name to apply custom styles to the date picker component. | undefined | | value | string | The current date value in the form of a string. | undefined | | onChange | (val: string) => void | Callback function that is triggered when the selected date changes. It receives the selected date as a string. | undefined | | calenderLocale | 'en' | 'ne' | The locale of the calendar. Use 'en' for the English calendar or 'ne' for the Nepali calendar. | 'en' |

Example

<ESewaNepaliDatepicker
  label="Select Nepali Date"
  value={date}
  onChange={handleDateChange}
  calenderLocale="ne"
/>

ESewaRadio Component

The ESewaRadio component is a customizable radio button with a label, styled using styled-components. It supports the necessary props for usage in forms and customizable styling.

2. Using the Component

After importing the ESewaRadio component, you can use it in your React components by passing the necessary props. Below is an example of how to use the radio button:

Example Usage

import React, { useState } from 'react';
import { ESewaRadio } from './esewa-ui-library'

const MyComponent = () => {
  const [isChecked, setChecked] = useState(false);

  return (
    <div>
      <ESewaRadio
        label="Accept Terms and Conditions"
        name="terms"
        checked={isChecked}
        onChange={(checked) => setChecked(checked)}
      />
    </div>
  );
};

export default MyComponent;

Explanation of Props

The ESewaRadio component accepts the following props:

label

• Type: string
• Required: No
• Description: This prop is used to display the label next to the radio button. It is an optional prop and can be omitted if no label is needed.

<ESewaRadio label="Accept Terms and Conditions" ... />

Props

The ESewaRadio component accepts the following props:

| Prop | Type | Required | Default Value | Description | |-------------|-------------------------------|----------|---------------|--------------------------------------------------------------------------------------------------| | label | string | No | undefined | The label displayed next to the radio button. | | name | string | Yes | N/A | The name of the radio button, which groups it together with other radio buttons. | | onChange | (checked: boolean) => void | No | undefined | Callback function that is triggered when the radio button's checked state changes. | | checked | boolean | Yes | false | Determines whether the radio button is selected (true) or not (false). | | labelClass| string | No | '' | A custom class applied to the label element for styling. | | className | string | No | '' | A custom class applied to the root wrapper element of the radio button component. | | disabled | boolean | No | false | Used to disable radio state |

ESewaSanitizeHtml Component

The ESewaSanitizeHtml component sanitizes HTML content before rendering it in a React component. It ensures that the HTML content is safe and free from malicious code by using the DOMPurify library.

Usage

To use the ESewaSanitizeHtml component, simply pass the raw HTML content as the html prop. The component will sanitize the content to ensure it is safe for rendering.

Example:

import React from 'react'
import { ESewaSan