@alexseitsinger/react-simple-text-input
v0.1.1
Published
A simple text input with a toggled error message.
Downloads
3
Readme
SimpleTextInput
An input that has a built in error message.
Parameters
props
objectprops.isSubmitted
boolean The boolean value if the form is submitted.props.setSubmitted
function The function to invoke to toggle that the form is submitted.props.isEmpty
boolean If this input element is currently emptyprops.setEmpty
function The function to invoke to toggle the inputs emptyness stateprops.value
boolean The current value of the inputprops.setValue
function The function to invoke to set the inputs valueprops.errorMessage
string The message to display when the input is empty.props.errorPosition
string The placement of the error in the input element.props.errorStyle
object The inline style tp use on the error element.props.placeholder
string The placeholder text to use.props.inputStyle
object The inline style to use on the input element.
Examples
import React from "react"
import { SimpleTextInput } from "@alexseitsinger/react-simple-text-input"
function App({ ... }) {
return (
<Form onSubmit={onSubmit}>
<SimpleTextInput
value={inputValue}
setValue={setInputValue}
isEmpty={isInputEmpty}
setEmpty={setInputEmpty}
isSubmitted={isSubmitted}
setSubmitted={setSubmitted}
placeholder={"Input..."}
errorMessage={"The input is empty."}
errorPosition={"centerLeft"}
errorStyle={{width: "100%", height: "100%"}}
inputStyle={{backgroundColor: "#FFFFFF", padding: "0.333em"}}
/>
</Form>
)
}
Returns function A controller stateless functional component.