@hdoc/react-input

@hdoc/react-input

Simple input components for your React app

Installation

npm install @hdoc/react-input

Usage

import { EmailIcon, StarIcon, StarBorderIcon } from "third-party-package";
import { Input, Textarea, Checkbox } from "@hdoc/react-input";

function App() {
  return (
    <>
      <Input label="Email" type="email" iconEnd={<EmailIcon />} />
      <Textarea label="Message" />
      <Checkbox
        label="Favorite"
        icon={<StarBorderICon />}
        iconChecked={<StarIcon />}
        color="warning"
      />
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS custom properties available for the following components:

• <Input />
• <Textarea />
• <Checkbox />

General Customization

You can customize the label, placeholder and helper text for any of the previously mentioned components.

CSS Custom Properties

/* YOU CAN USE ANY SELECTOR YOU WANT */
:root,
[data-theme="my-custom-theme"],
body.dark,
.any-parent,
.class-to-extend-styles {
  --placeholder-color: #636363;
  --placeholder-disabled: #434343;

  --label-font-family: "Roboto";
  --label-font-size: 14px;
  --label-font-weight: 600;
  --label-text: #828282;
  --label-text-focus: lightblue;

  /* ↓ This should be passed to .label */
  --helper-text-color: #828282;

  /* ERROR VARIANT, for label and helper text */
  --error: #f44336;
}

CSS Classes

.label

The styles for the label

.label--error

The error styles for the label

.label--fullwidth

The full width styles for the label

.helper-text

The styles for the helper text

Reducing Build Size

The default entry point includes CSS for all of the components. If you are only using a few components, you can reduce the build size by importing only the components you need:

- import { Input, Textarea } from "@hdoc/react-input";
+ import { Input } from "@hdoc/react-input/dist/Input";
+ import { Textarea } from "@hdoc/react-input/dist/Textarea";

Or, you can use babel-plugin-import to automatically import the components:

// config for babel
{
  ...otherConfig,
  plugins: [
    [
      "import",
      {
        libraryName: "@hdoc/react-input",
        libraryDirectory: "dist",
        camel2DashComponentName: false,
        transformToDefaultImport: false,
      },
    ],
  ]
}

Additionally, you will need to import the global CSS in your entry file:

import "@hdoc/react-input/dist/main.css";