@candour-ui/react v1.0.38

Digit Tally Component Library

Introduction

The Digit Tally Component Library is a collection of reusable React components designed to simplify the development of user interfaces. This library provides a set of well-crafted components that can be easily integrated into your projects, ensuring a consistent look and feel while saving development time. Whether you're building a small application or a large-scale project, these components are flexible, customizable, and ready to use.

Key Features

• Customizable Components: Each component comes with a variety of props for customization, allowing you to tailor styles and behavior to your needs.
• Accessibility: Designed with accessibility in mind to ensure your applications are usable by everyone.
• Lightweight: The library is lightweight and optimized for performance, ensuring a smooth user experience.
• Responsive Design: Components are built to be responsive, adapting to different screen sizes seamlessly.

Installation

To install the library, you can use npm or yarn:

npm install @candour-ui/react

or

yarn add @candour-ui/react

Button Component

Usage

<Button
  type="submit"
  variant="solid"
  disabled
  plusIcon
  className="submitButton"
  onClick={() => console.log('Button clicked!')}
>
  Submit
</Button>

Dropdown Component

DropdownItem

DropDownMenu

DropdownTrigger

DropdownWrapper

Usage

<DropdownWrapper>
  <DropdownTrigger>
    <Button type="button" variant="solid" onClick={() => {}}>
      Trigger Drop Down
    </Button>
  </DropdownTrigger>

  <DropDownMenu
    onAction={handleDropDownAction}
    size="lg"
    radius="md"
    shadow="xl"
  >
    <DropdownItem itemKey="new" text="New file" />
    <DropdownItem itemKey="old" text="Old file" />
  </DropDownMenu>
</DropdownWrapper>

Popover Component

Popover

PopoverTrigger

PopoverContent

Usage

<Popover>
  <PopoverTrigger>
    <button>Open Popover</button>
  </PopoverTrigger>
  <PopoverContent variant="solid" position="bottom">
    <p>Popover content (bottom)!</p>
  </PopoverContent>
</Popover>

Modal

Usage

<Modal modalId="modalId" closeOnBackdropClick>
  <div>This is the modal content</div>
</Modal>

Toast

Usage

<Toast
  action="Success"
  toastId="toastId"
  message="Item deleted successfully."
  variant="info"
  position="top-right"
  closeButton
/>

Toast Container

Usage

Place the ToastContainer at the root of your app or in a specific component

<ToastContainer />

ToggleTheme

-

<ToggleTheme />

Filter Component

Filter

FilterTrigger

FilterMenu

FilterItem

Usage

<Filter>
  <FilterTrigger
    label="Filter"
    arrowDown
    iconPosition="right"
    variant="solid"
  />

  <FilterMenu onSelectionChange={handleFilterChange} selectedKey={selectedKey}>
    <FilterItem value="new">New Item</FilterItem>
    <FilterItem value="popular">Popular Item</FilterItem>
    <FilterItem value="old">Old Item</FilterItem>
  </FilterMenu>
</Filter>

Sort Component

Sort

SortTrigger

SortMenu

SortItem

Usage

<Sort onChange={handleChange}>
  <SortTrigger sortIcon arrowDown label="Sort" />
  <SortMenu selectedKey={selected} onSelectionChange={handleChange}>
    {data.map((item) => (
      <SortItem value={item.value} key={item.label}>
        {item.label}
      </SortItem>
    ))}
  </SortMenu>
</Sort>