Custom Components with addon Props applied with Tailwind CSS.

Our Custom component is a custom React component implemented with Tailwind CSS classes. It takes props defined in their respective interfaces and renders a component with different features based on the provided props.

Run Commands

To make sure all of our components render properly we need to add tailwindcss, postcss, and autoprefixer as our Dev dependencies:

To add them use the Commands:

  yarn add -D tailwindcss postcss autoprefixer

And then initialize your tailwind.config.js and postcss.config.cjs with:

  npx tailwindcss init -p

For more procedure of installation of Tailwind CSS, follow this link:

Install Tailwind CSS using Post CSS

To add this component through yarn run

  yarn add base-components-ui

To add this component through npm run

  npm i base-components-ui

API Reference

Button Component

    <Button
        selfLabel="Button"
        onClick={() => alert("helo")}
        className="bg-blue-500"
    />

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | icon | React.ReactNode | optional. | | selfLabel | string | optional. | | isloading | boolean | optional. | | iconClassName | string | optional. | | ...props | DetailedHTMLProps | optional. |

Dropdown Component

    <Dropdown
        name="dropdown"
        selfLabel="dropdown"
        isRequired
        onChange={(e) => {
          console.log(e);
        }}
        defaultValue={"--Select something from Dropdown--"}
        className={className}
      >
      {children}
    </Dropdown>

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | isRequired | boolean //defaults to false | optional. | | isLoading | boolean | optional. | | defaultDisabled | boolean | optional. | | selfLabel | string | optional. | | optionalText | string | optional. | | textColor | string | optional. | | defaultLabel | string | optional. | | children | React.ReactNode | optional. | | invalidText | string | optional. | | defaultValue | string or number or readonly string[] | optional. | | selfLabel | string | optional. | | ...props | DetailedHTMLProps | optional. |

Form Container Component

    <FormContainer
        formTitle="title"
        previous={() => {}}
        submitClick={() => {}}
        submitLabel="submit"
        cancelLabel="cancel"
        isLoading={true || false}
      >
      {children}
    </FormContainer>

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | formTitle | string | required | | isLoading | boolean | optional. | | previous | (event?: React.BaseSyntheticEvent) => void | required | | submitClick | (event?: React.BaseSyntheticEvent) => void | required | | children | React.ReactNode | required | | submitLabel | string | required | | cancelLabel | string | required | | backgroundColor | string | required | | ...props | DetailedHTMLProps | required |

File Upload Component

    <FileUpload
        name={name}
        File={file}
        isRequired={false} // default
        invalidText={invalidText}
        isSubmit={isSubmit}
        isSuccess={isSuccess}
        onChange={onChange}
    />

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | File | File | optional. | | isSuccess | boolean | optional. | | isSubmit | boolean | optional. | | isRequired | boolean //defaults to false | optional. | | invalidText | string | optional. |

Inputfield Component

    <InputField
        type={type}
        placeholder={placeholder}
        isRequired //defaults to true
        selfLabel={selfLabel}
        className={className}
        onChange={onChange}
        name={name}
        value={value}
        invalidText={invalidText}
    />

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | selfLabel | string | optional. | | icon | string | optional. | | iconclassName | string | optional. | | invalidText | string | optional. | | isRequired | boolean //defaults to false | optional. | | optionalText | string | optional. | | ...props | React.DetailedHTMLProps | optional. |

TextArea Component

    <InputField
        placeholder={placeholder}
        isRequired //defaults to true
        label={selfLabel}
        className={className}
        onChange={onChange}
        name={name}
        value={value}
        invalidText={invalidText}
    />

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | selfLabel | string | optional. | | icon | string | optional. | | iconclassName | string | optional. | | invalidText | string | optional. | | isRequired | boolean //defaults to false | optional. | | optionalText | string | optional. | | ...props | React.DetailedHTMLProps | optional. |

Authors

• kaustubh_hirve

License

MIT