sutra-library

Sutradhar Components Library

Welcome to the Sutradhar Components Library, a collection of customizable and reusable React components designed to enhance the user experience of your web applications. Whether you're a developer working on a personal project or building enterprise-level software, our library provides a set of versatile components to simplify and expedite your development process.

Why Choose Sutradhar Components?

Developing modern web applications often requires implementing a wide range of user interface elements, from inputs and dropdowns to date pickers and numeric inputs. Sutradhar Components Library offers an extensive selection of ready-to-use components that not only save you time but also maintain consistent design patterns across your application.

Our components are designed with flexibility in mind, allowing you to easily customize their appearance and behavior to match your application's unique requirements. With Sutradhar Components, you can build intuitive and polished interfaces while focusing more on the logic that powers your application.

Key Features

• Customization: Each component comes with a set of customizable props, enabling you to tailor the components to fit your project's specific needs.

• Consistency: Maintain a cohesive design language throughout your application by utilizing our consistently styled components.

• Ease of Integration: Integrate our components seamlessly into your existing React projects without hassle.

• Responsive Design: Components are designed with responsiveness in mind, ensuring they adapt smoothly to various screen sizes and devices.

• Documentation: Our components come with comprehensive documentation and usage examples, making it easy for developers of all skill levels to implement them effectively.

• Regular Updates: We strive to enhance and expand our library with new components and improvements to ensure your applications stay up-to-date with the latest UI trends.

Get Started

To get started with the Sutradhar Components Library, simply install the package via npm:

Install

npm install --save sutra-library

List of Components

• AmountInput
• CustomCheckBox
• DateInput
• Dropdown
• FileInput
• NumberInput
• RegexInput
• RadioButton
• TextInput

DateInput Component

A customizable DateInput component for React applications, part of the Sutra Library.

import React from 'react'
import { DateInput } from 'sutra-library'

function MyComponent() {
  return (
    <DateInput
      defaultValue="20230508" //yyyymmdd
      CaptionType="FloatingLabel" //Chose any one between "FloatingLabel" "OnTopLabel" "InFrontLabel"
      displayLabel='Select a Date'
      placeholder='Choose a date'
      dateLessthan={"20230818"}
      dateGreaterthan={"20230801"}
      lastDate //pass this if you want last date of month
      //Add more props as needed
    />
  )
}

export default MyComponent

Here are the available props for the DateInput component:

| Prop | Type | Description | | --------------- | -------- | ------------------------------------------------------------------------- | | defaultValue | Date | Default value to be set in the input. | | CaptionType | String | Type of caption (options: "float", "top", "left"). | | displayLabel | String | Label text displayed above or near the input. | | placeholder | String | Placeholder text to display when input is empty. | | lastDate | Boolean | Use the last date of the month for incomplete dates. | | dateLessthan | String | Upper limit for selectable dates (format: "YYYYMMDD"). | | dateGreaterthan | String | Lower limit for selectable dates (format: "YYYYMMDD"). | | returnValue | Function | Callback function to handle returned value. | | fullDate | Boolean | Display the full date, including day, month, and year. |

Additional Styling Props

| Prop | Type | Description | | --------------- | ------ | ------------------------------------- | | border | String | CSS border properties for styling. | | height | String | Height of the component. | | width | String | Width of the component.(only in "px") | | padding | String | Padding of the component. | | fontSize | String | Font size of the component. | | borderStyle | String | CSS border style for styling. | | backgroundColor | String | Background color of the component. | | fontColor | String | Font color of the component. | | fontName | String | Font name or family of the component. | | borderRadius | String | Border radius of the component. |

Dropdown Component

A customizable Dropdown component for React applications, part of the Sutra Library.

import React from 'react'
import { DropdownComponent } from 'sutra-library'

function MyComponent() {
  return (
    <DropdownComponent
      alignment={'left'}
      displayLabel={'State'}
      selectionLabel={'descn'}
      selectionValue={'recno'}
      multi={true}
      async={true}
      minInput={0}
      placeholder={'Select'}
      displayLabelAlignment={'top'}
      customStyle={{ width: '50%' }}
      // Add more props as needed
    />
  )
}

export default MyComponent

Here are the available props for the Dropdown component:

| Prop | Type | Description | | --------------------- | -------- | ------------------------------------------------------------------------- | | id | String | Unique ID for the options. | | customStyle | Object | Custom styles for the dropdown. | | placeholder | String | Placeholder text for the dropdown. | | displayLabel | String | Label text displayed above the dropdown. | | isrequired | Boolean | Adds a required * mark to the dropdown. | | selectionLabel | String | Selecting label from options. (Compulsory) | | selectionValue | String | Selecting value from options. (Compulsory) | | async | Boolean | Enables async dropdown. | | apiUrl | String | API URL for fetching options. | | minInput | Number | Minimum input length while searching. | | defaultValue | String | Default value that is visible on render. | | multi | Boolean | Enables selecting multiple values. | | dependencies | Array | Dependencies for the dropdown. | | body | Object | Body for calling the API. | | optionList | Array | Custom list of options. | | style | Object | Inner style for the dropdown. | | disabledValues | Array | Disable specific values from the option list. | | returnValue | Function | Callback function to return selected value to the parent component. | | displayLabelAlignment | String | Label alignment on top of left side of the dropdown (e.g. "left", "top"). |

TextInput Component

A customizable TextInput component for React applications, part of the Sutra Library.

import React from 'react'
import { TextInput } from 'sutra-library'

function MyComponent() {
  return (
    <TextInput
      label={'Enter Gst No:'}
      maxLength={15}
      type={'text'}
      capitalize={true}
      displayLabelAlignment={'left'}
      placeholder={'Enter Gst No'}
      defaultValue={''}
      customStyle={{
        width: '500px',
        padding: '6px',
        borderRadius: '4px',
        border: '2px solid #ccc',
        fontSize: '16px'
      }}
      regex={'gst'}

      // Add more props as needed
    />
  )
}

export default MyComponent

Here are the available props for the TextInput component:

| Prop | Type | Description | | --------------------- | -------- | ------------------------------------------------------------------------- | | customStyle | Object | Custom styles for the input. | | returnValue | Function | Callback function to return the input value to the parent component. | | displayLabelAlignment | String | Label alignment on top of left side of the dropdown (e.g. "left", "top"). | | isrequired | Boolean | Adds a required * mark to the dropdown. | | className | String | CSS class name for styles. | | label | String | Label text for the input. | | id | String | Unique ID for the options. | | placeholder | String | Placeholder text for the dropdown. | | defaultValue | String | Default value that is visible on render. | | type | String | Type of input (e.g. "text", "number"). | | maxLength | Number | Maximum length of the input value. (Compulsory) | | onChange | Function | Callback function for input value change. | | capitalize | Boolean | Convert the input value to uppercase. | | regex | RegExp | Regular expression for validation (e.g. for PAN, GST, or custom pattern) |

AmountInput Component

A customizable AmountInput component for React applications, part of the Sutra Library.

import React from 'react'
import { AmountInput } from 'sutra-library'

function MyComponent() {
  return (
    <AmountInput
      label={'Enter Amount'}
      placeholder={'Enter Amount ₹'}
      regexProp='^[0-9]+(\.[0-9]{0,2})?$'
      currencyFormat='INR' // Specify the currency format here ("INR" or "USD")
      // Add more props as needed
    />
  )
}

export default MyComponent

Here are the available props for the AmountInput component:

| Prop | Type | Description | | --------------------- | -------- | ---------------------------------------------------------------------- | | onReturnValueChange | Function | Callback function to send the value to the parent component on change. | | defaultStyle | Object | Default styles for the input. | | placeholder | String | Placeholder text for the input. | | regexProp | RegExp | Regular expression pattern for validation. | | onChange | Function | Callback function to send the value to the parent component on change. | | label | String | Display label for the input. | | style | Object | Custom styles for the input. | | id | String | Unique ID for the input. | | ClassName | String | CSS class name for styles. | | defaultValue | Number | Default value that is visible on render. | | displayLabelAlignment | String | Label alignment on top of left side of the input (e.g. "left", "top"). | | isrequired | Boolean | Adds a required * mark to the input. | | currencyFormat | String | New prop to specify the currency format ("INR" or "USD"). |

NumberInput Component

A customizable NumberInput component for React applications, part of the Sutra Library.

import React from 'react'
import { NumberInput } from 'sutra-library'

function MyComponent() {
  return (
    <NumberInput
      type='mobile'
      displayLabel={' Enter Mobile'}
      placeholder='Enter Number'
      //Add more props here
    />
  )
}

export default MyComponent

Here are the available props for the NumberInput component: | Prop | Type | Description | | ---------------------- | ---------|---------------------------------------------------------------------------| | maxLength | String | Maximum length of input value, e.g. "10". | | isrequired | Boolean | Adds a required * mark to the input. | | displayLabel | String | Label text displayed above or near the input. | | defaultValue | Number | Default value that is visible on render. | | displayLabelAlignment | String | Label alignment on top of left side of the input (e.g. "left", "top"). | | id | String | Unique ID for the input. | | returnValue | Function | Callback function to handle the returned value. | | label | String | Label text for the input. | | type | String | Type of input (e.g. "number"). | | defaultStyle | Object | Default styles for the input. | | style | Object | Custom styles for the input. | | placeholder | String | Placeholder text for the input. |

FileInput Component

A customizable FileInput component for React applications, part of the Sutra Library.

import React from 'react'
import { FileInput } from 'sutra-library'

function MyComponent() {
  const [selectedImageData, setSelectedImageData] = useState(null)

  const handleImageSelect = (base64Data) => {
    setSelectedImageData(base64Data) //Can use selectedImage anywhere
  }

  return (
    <FileInput
      Label={'Demo Label'}
      LabelAlignment='top'
      onImageSelect={handleImageSelect}
      //add more props here
    />
  )
}

export default MyComponent

Here are the available props for the FileInput component: | Prop | Type | Description | | ---------------------- | ---------|---------------------------------------------------------------------------| | Label | String | Label text displayed above or near the input. | | inputStyle | Object | Default styles for the input. | | onImageSelect | Function | Callback function to handle the returned value. | | row | Boolean | Selected image should be in row or not?(By default it is in column ) | | ShowImage | Boolean | To show image (by default it is true) | | LabelAlignment | String | Label alignment on top of left side of the input (e.g. "left", "top"). |

License

MIT ©