Simple input components for your React app
npm install @hdoc-react/input
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"
/>
</>
);
}
See documentation below for reference to all of the props, classes and CSS custom properties available for the following components:
You can customize the label, placeholder and helper text for any of the previously mentioned components.
/* 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;
}
.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
The default entry point includes CSS for all of the components. You have two options to reduce the build size:
- import { Input, Textarea } from "@hdoc-react/input";
+ import { Input } from "@hdoc-react/input/dist/Input";
+ import { Textarea } from "@hdoc-react/input/dist/Textarea";
Install the plugin with npm install -D babel-plugin-import
Create a .babelrc.js
file in your project root with the following content:
import inputConfig from "@hdoc-react/input/config/babel-import.js";
const plugins = [...otherPlugins, inputConfig];
module.exports = { plugins };