@ninetynine/react-dynamic-form-toggle-visibility-input v1.0.0

Contents

• Installation
• Examples
• Usage
  • Props
    • visible
    • name
    • placeholder
    • value
    • renderToggle
    • invalid
    • onToggle
    • onChange
    • onBlur
    • classPrefix
    • defaultInputClass
    • invalidInputClass
    • validInputClass
• Packages
  • Similar
  • Useful

Installation

form-toggle-visibility-input can be installed with NPM or Yarn.

# Installing with NPM
npm i --save @ninetynine/react-dynamic-form-toggle-visibility-input

# Installing with Yarn
yarn add @ninetynine/react-dynamic-form-toggle-visibility-input

Examples

// Example of using secure input, but inheriting props from form builder
export default [
  {
    name: 'username',
    label: 'Username',
    placeholder: 'Username',
  },
  {
    name: 'password',
    label: 'Password',
    placeholder: 'Password',
    validationRules: [
      {
        rule: 'required',
        message: 'A password is required',
      },
    ],
    render: (
        <SecureInput />
    ),
  },
]

// Example of using secure input, but passing props in manually from form builder
export default [
  {
    name: 'username',
    label: 'Username',
    placeholder: 'Username',
  },
  {
    name: 'password',
    label: 'Password',
    placeholder: 'Password',
    validationRules: [
      {
        rule: 'required',
        message: 'A password is required',
      },
    ],
    render: ({ name, placeholder }, value, onChange, onBlur, invalid) => (
      <SecureInput
        name={name}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        invalid={invalid}
      />
    ),
  },
]

Usage

form-toggle-visibility-input is an addon package for react-dynamic-form-builder. Make sure you read the react-dynamic-form-builder documentation before continuing.

When creating a custom render for an input be sure to pass at least the following props:

• name
• placeholder
• value
• onChange

Props

• visible (bool, default: false)
• name (string)
• placeholder (string)
• value (any, default: )
• renderToggle (node, function default: null)
• invalid (any, default: undefined)
• onToggle (function, default: noop)
• onChange (function, default: noop)
• onBlur (function, default: noop)

Inherit from form builder

• classPrefix (string, default rdf)
• defaultInputClass (string, default input)
• invalidInputClass (string, default invalid)
• validInputClass (string, default valid)

These will have to be passed separately, as they are not passed down through custom render.

visible

visible can be managed internally or be passed in (and updated by using onToggle).

// With default value
{
  visible: false,
}

// With custom value
{
  visible,
  onToggle: this.onToggle,
}

name

name is used for where the data is stored and returned when submitted.

// With custom value
{
  name: 'username',
}

placeholder

placeholder is that of a normal HTML placeholder- displayed when input is empty.

// With custom value
{
  placeholder: 'Username'
}

value

value is the current value of the input.

// With default value
{
  value: ''
}

// With custom value
{
  value
}

renderToggle

renderToggle is used when you want to do something order than the default toggle button.

By default the toggle button uses Font Awesome's fa-eye and fa-eye-slash icons.

// With default value
{
  renderToggle: null
}

// With custom value
{
  renderToggle: (
    <Button />
  )
}

{
  renderToggle: ({ visible, onClick }) => (
    <Button
      visible={visible}
      onClick={onClick}
    />
  )
}

invalid

invalid is used to add the invalidInputClass when the form builder considers the input's value to be invalid.

// With default value
{
  invalid: undefined
}

// With custom value
{
  invalid: true
}

onToggle

onToggle is called whenever the toggle button is used. This can be used to manage the visible state from outside.

// With default value
{
  onToggle: noop
}

// With custom value
{
  onToggle: newVisible => (
    this.setState({ visible: newVisible })
  )
}

onChange

onChange should really only be the form builder's onChange callback unless you need to tweak the data again before it hits the form builder.

// With default value
{
  onChange: noop
}

// With custom value
{
  onChange: event => this.onChange(event)
}

onBlur

onBlur should really only be the form builder's onBlur callback unless you need to tweak the data again before it hits the form builder.

// With default value
{
  onBlur: noop
}

// With custom value
{
  onBlur: event => this.onBlur(event)
}

Packages

Similar

• React Dynamic Form Builder
• React Dynamic Form Date Picker
• React Dynamic Form Select
• React Dynamic Data Table

Useful

• NoOp
• Call
• React Flex