UNPKG

woi-react-components

Version:

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

48 lines (44 loc) • 6.44 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# WOI TextField Component WOI textfield component is a reusable React component for creating interactive buttons in your web application. ## Props WOI TextField component accepts the following props: - `type` (string): The type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is 'text'. - `label` (string): The content to be displayed inside the button. This is the text that appears as label. - `labelFontSize` (string): The text size or font size of the label text. It determines how large or small the text appears. - `labelFontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters. - `labelFontFamily` (string): The font-family property specifies the font for label text. The font-family property can hold several font names as a "fallback" system. - `labelFontDecoration` (string): The text-decoration-style property sets the style of the label text decoration (like solid, wavy, dotted, dashed, double). - `labelColor` (string): The text color of the label. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `placeholder` (string): The content to be displayed inside the button. This is the text that appears as placeholder. - `placeholderFontSize` (string): The text size or font size of the placeholder text. It determines how large or small the text appears. - `placeholderFontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters. - `placeholderFontFamily` (string): The font-family property specifies the font for a placeholder. The font-family property can hold several font names as a "fallback" system. - `placeholderFontDecoration` (string): The text-decoration-style property sets the style of the placeholder text decoration (like solid, wavy, dotted, dashed, double). - `placeholderColor` (string): The text color of the placeholder. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `supportingText` (string): The content to be displayed inside the button. This is the text that appears as supporting label. - `supportingTextFontSize` (string): The text size or font size of the supporting text. It determines how large or small the text appears. - `supportingTextFontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters. - `supportingTextFontFamily` (string): The font-family property specifies the font for supporting text. The font-family property can hold several font names as a "fallback" system. - `supportingTextFontDecoration` (string): The text-decoration-style property sets the style of the supporting text decoration (like solid, wavy, dotted, dashed, double). - `supportingTextColor` (string): The text color of the supporting text. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `fontSize` (string): The text size or font size of the imput's text. It determines how large or small the input appears. - `fontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters. - `fontFamily` (string): The font-family property specifies the font for an input. The font-family property can hold several font names as a "fallback" system. - `fontDecoration` (string): The text-decoration-style property sets the style of the input text decoration (like solid, wavy, dotted, dashed, double). - `color` (string): The text color of the input text. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `backgroundColor` (string): The background color of the button. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `backgroundOpacity` (string): opacity is a CSS property that allows you to change the opaqueness of an element. By default, all elements have a value of 1 . - `borderColor` (string): The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `borderWidth` (string): The border-width property sets the width of an element's borders. Specified as a numerical value (e.g., pixels) or as a percentage. - `borderRadius` (number): The borderRadius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. - `borderType` (string): The border-style property sets the style of an element's four borders. This property can have from one to four values. - `boxShadow` (string): The CSS box-shadow property is used to apply one or more shadows to an element. Specify a Horizontal and a Vertical Shadow. - `multline` (number): Specifies the visible number of lines in a text area. - `leftIcon` (string): An icon or image that appears before the button's text. It can be specified as a path to an icon file or a CSS class for an icon font. - `leftIconSize` (number): The height and width of the icon, specified as a numerical value (e.g., pixels) or as a percentage of its container's width and height. - `leftIconColor` (string): The color of the icon. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `rightIcon` (string): An icon or image that appears before the button's text. It can be specified as a path to an icon file or a CSS class for an icon font. - `rightIconSize` (number): The height and width of the icon, specified as a numerical value (e.g., pixels) or as a percentage of its container's width and height. - `rightIconColor` (string): The color of the icon. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `onComplete` (Function): A function executed when input is filled and press enter key to submit the form. - `isDisabled` (boolean): A boolean flag that determines whether the button is in a disabled state. When set to true, the button is not clickable or interactive.