# base-components-ui

> 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.

Latest version **0.0.17** (published 2023-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install base-components-ui
pnpm add base-components-ui
yarn add base-components-ui
bun add base-components-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.17 |
| Published | 2023-05-28 |
| First published | 2023-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 174 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kaustubh_hirve |

## Links

- npm: https://www.npmjs.com/package/base-components-ui
- npm.io page: https://npm.io/package/base-components-ui

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Recent versions

- 0.0.17 (latest) — 2023-05-28
- 0.0.16 — 2023-05-28
- 0.0.15 — 2023-05-28
- 0.0.14 — 2023-05-28
- 0.0.13 — 2023-05-28
- 0.0.12 — 2023-05-28
- 0.0.11 — 2023-05-28
- 0.0.10 — 2023-05-28
- 0.0.9 — 2023-05-28
- 0.0.8 — 2023-05-28
- 0.0.7 — 2023-05-28
- 0.0.6 — 2023-05-28
- 0.0.5 — 2023-05-28
- 0.0.4 — 2023-05-28
- 0.0.3 — 2023-05-28
- … 1 more at https://npm.io/package/base-components-ui/versions

## README

# 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:
```bash
  yarn add -D tailwindcss postcss autoprefixer
```

And then initialize your `tailwind.config.js` and `postcss.config.cjs` with:
```bash
  npx tailwindcss init -p
```

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

[Install Tailwind CSS using Post CSS](https://tailwindcss.com/docs/installation/using-postcss)

To add this component through yarn run

```bash
  yarn add base-components-ui
```

To add this component through npm run

```bash
  npm i base-components-ui
```

## API Reference

### Button Component
```TypeScript
    <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
```TypeScript
    <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
```TypeScript
    <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
```TypeScript
    <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
```Typescript
    <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
```Typescript
    <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](https://www.npmjs.com/package/base-components-ui)


## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/base-components-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._