base-components-ui

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