@alexseitsinger/react-simple-text-input

SimpleTextInput

An input that has a built in error message.

Parameters

• props object
  • props.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 empty
  • props.setEmpty function The function to invoke to toggle the inputs emptyness state
  • props.value boolean The current value of the input
  • props.setValue function The function to invoke to set the inputs value
  • props.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.