@dwello-in/react-components

v1.0.10

Published

5 days ago

A collection of components used across Dwello applications.

Downloads

0High
0Medium
0Low

rinaldolobo

dwello

@dwello.in/react-components

A collection of components used across Dwello applications.

Install

npm install --save @dwello.in/react-components

Components

1) Universal Dropdown

Description

The UniversalDropdown component is a versatile dropdown component that can be used for both single-select and multi-select dropdowns. It supports both static and dynamic data fetching.

Usage

Here's an example of basic usage:

import React, { useState } from 'react'
import { UniversalDropdown } from '@dwello.in/react-components'
import '@dwello.in/react-components/dist/index.css'

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState([])
  const [dropdownOptions, setDropdownOptions] = useState([])

  const onSearch = (text) => {
    // API call to search based on the text
  }

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      dropDownOptions={dropdownOptions}
      selectedOptions={selectedOption}
      inputName='inputName'
      isMultiSelect={true}
      isApiCall={true}
      displayKey='objectName'
      onSearch={onSearch}
      onSelect={onAdd}
      onDelete={onRemove}
      onReset={() => setDropdownOptions(null)}
      suffix=''
      prefix=''
      isMandatory={true}
      active={true}
    />
  )
}

export default ExampleComponent

Props

Validations


The UniversalDropdown component includes built-in error handling to ensure required props are provided and correctly typed:

* If isMultiSelect is true, selectedOptions must be an array.
* If isMultiSelect is false, selectedOptions must be a string or an object.
* displayKey is required when the dropDownOptions are passed as array of objects.
* displayKey is required when the selectedOptions is an object.
* onSearch, onReset is required when isApiCall is true.
* search bar will appear when isApiCall is true or the dropDownOptions are greater than 5.
This validation ensures that the component is used correctly and helps prevent runtime errors.

Examples

Example for MultiSelect

const ExampleComponent = () => {
  const [dropdownOptions, setdropdownOptions] = useState([
    { objectName: 'option1' },
    { objectName: 'option2' },
    { objectName: 'option3' }
  ])
  const [selectedOption, setSelectedOption] = useState(['option1'])

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      dropDownOptions={dropdownOptions} // always should be an array
      selectedOptions={selectedOption} // should be an array
      inputName='inputName'
      isMultiSelect={true}
      displayKey='objectName' // to display the key objectName in dropdownOptions
      onSelect={onAdd}
      onDelete={onRemove}
    />
  )
}

Example for SingleSelect

const ExampleComponent = () => {
  const [dropdownOptions, setdropdownOptions] = useState([
    'option1',
    'option2',
    'option3'
  ])
  const [selectedOption, setSelectedOption] = useState(null)

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      dropDownOptions={dropdownOptions} // always should be an array
      selectedOptions={selectedOption} // should be an string or object
      inputName='inputName'
      isMultiSelect={false}
      onSelect={onAdd}
      onDelete={onRemove}
    />
  )
}

Example for isApiCall is true

const ExampleComponent = () => {
  const [dropdownOptions, setdropdownOptions] = useState([
    'option1',
    'option2',
    'option3'
  ])
  const [selectedOption, setSelectedOption] = useState(null)

  const onSearch = (text) => {
    // API call to search based on the text
  }

  const onAdd = (val, index) => {
    // Handle adding a option
  }

  const onRemove = (val, index) => {
    // Handle removing a option
  }

  return (
    <UniversalDropdown
      selectedOptions={selectedOptions}
      dropDownOptions={dropdownOptions}
      inputName='inputName'
      isMultiSelect={false}
      isApiCall={true}
      displayKey='objectName'
      onSelect={onAdd}
      onDelete={onRemove}
      onSearch={(text) => onSearch(text)} // onSearch prop required when isApiCall is true
      onReset={() => {
        setdropdownOptions(null) // onReset prop required when isApiCall is true
      }}
    />
  )
}

2) ActionButton Overview

ActionButton is a customizable React component designed to create a button with various styling and behavior options. It allows developers to easily integrate a button with custom styles and handle click events conditionally based on its active state.

Usage

import React, { Component } from 'react'
import { ActionButton } from '@dwello.in/react-components'
import '@dwello.in/react-components/dist/index.css'
class Example extends Component {
  render() {
    return (
      <ActionButton
        title='Submit'
        onClick={() => {
          console.log('action handler')
        }}
        active={true}
        activeColor='#fff'
        inActiveColor='#757575'
        activeBgColor='#80C341'
        inActiveBgColor='#FFFFFF'
        activeBorderColor='transparent'
        inActiveBorderColor='lightgray'
        fontWeight='bold'
        borderStyle='solid'
        borderRadius='20px'
        paddingTop='7px'
        paddingBottom='7px'
        paddingLeft='20px'
        paddingRight='20px'
        hoverBgColor='red'
        hoverTextColor='green'
        webFontSize='16px'
        webLineHeight='23px'
        mobileFontSize='14px'
        mobileLineHeight='21px'
      />
    )
  }
}

API Reference

Props

Error Handling

 The component includes internal checks to ensure required props are provided and are of the correct type. If a required prop is missing or a prop has an incorrect type, an error will be thrown.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@dwello.in/react-components

Install

Components

1) Universal Dropdown

Usage

Props

Validations

Examples

2) ActionButton Overview

Usage

API Reference

Props

Error Handling

License