0.0.4 • Published 3 years ago
@matthew-stanley/react-component-library v0.0.4
React Component Library
A simple Component Library
Components
Text Input
import {TextInput} from @matthew-stanley/react-component-library.
The Text Input component can be used as quick way to get form text inputs up & running within your project. This component offers validation and comes with built in regular expressions to test the inputted value. It will function on it's own right out the box or can be customized to fit your needs as a developer.
A Demo of the Components can be found at the following link.
Matthew Stanley - React Component Library
| Props | Type | Description |
|---|---|---|
| label | String | Text that would display for the input's label. If you would like to remove this element pass in a value of null |
| labelAttributes | Object | If you have any html attributes you would like to pass on to the label element, they can be added as an object here. |
| componentID | String | This will be used as the id of the input html element |
| value | String | If a value for this input already exists then it should be placed here. Default will be an empty string. |
| placeholder | String | Text that appears in input when it has no value set. |
| onChangeCallBack | Function | You can pass a function here. If you would like a function to be called with the input value's change. An example for this is passing the user input value on to a separate component. |
| inputAttributes | Object | If you have any html attributes you would like to pass on to the input element, they can be added as an object here. |
| validate | Boolean | Set to true if you would like to validate the user's input. The user's input would can be validated using the component's built in Regex or utilize a customRegex. Default false. |
| regexType | String | The TextInput Component offers a couple of built in Regular Expressions that can be used to validate the user's input. The options are personName, email and postalCode. See below for more information about the available options. |
| customRegex | Regex | If you would like to use your own Regular Expression, you can use this prop to submit it here. This will override the value for RegexType |
| optional | boolean | Default set to false. Text components with optional set to true, will accept blank values, even if validate is set to true. |
| errorMessage | String | If the validate is set to true, then an error message will appear if the user's input value does not pass the Regular expression being used. |
| errorMessageAttributes | Object | If you have any html attributes you would like to pass on to the error message paragraph element, they can be added as an object here. |
| containerClassName | String | The class name of the div element wrapping the entire component. |
Form
import {Form} from @matthew-stanley/react-component-library.
The Form component is can automatically recognize when a component from the same library is a child of the form & automatically collect the data and run validation on Submit. The default Form is empty with the exception of a the submit button
| Props | Type | Description |
|---|---|---|
| formID | String | The id for the form element. This is required in order for the Form component to function correctly. |
| initialFormState | Object | If you are providing initial values for any of the Form component's children, you can pass them in this object. Ex. {formValues: {firstName: "Matthew", lastName: "Stanley", email: "example@test.com"}} |
| formAttributes | Object | If you have any additional html attributes you would like to pass on to the HTML form element within the component, they can be added as an object here. |
| onSubmit | Function | This function gets called when the user presses submit and if the form does not have any errors. |
| groupErrors | Boolean | Default: false. If this prop is set to true, all error messages will be grouped into one message that displays at the bottom of the form. |
| onChangeCallBack | Function | You can pass a function here. If you would like a function to be called with the input value's change. An example for this is passing the user input value on to a separate component. |
| errorMessage | String | This is the error message that will display if there is an error within the Form and groupErrors has been set to true. |