Input fields for P2PU projects

Requirements

• Bootstrap CSS
• React

Usage

Example

See demo/src/index.js for more examples

import React, { useState } from 'react'
import { InputWithLabel } from "p2pu-input-fields"

const Form = () => {
  const [content, setContent] = useState({})
  const handleChange = (newContent) => {
    setContent({
      ...content,
      ...newContent
    })
  }

  return(
    <div className="container">
      <InputWithLabel
        name="text-input-demo"
        label="Text input"
        value={content['text-input-demo']}
        handleChange={handleChange}
        required={true}
      />
    </div>
  )
}

All inputs receive the following props:

Prop	Description
label (required)	The label for the input
name (required)	The string will be used as the name and ID for the input, as well as the key in the return value for handleChange
value (required)	The value of the input
handleChange (required)	The function called when the input value changes. Called with an object { [name]: value }
required (optional)	When true will add an asterisk to the label and set the HTML input attribute as required
classes (optional)	Classes to be applied to the wrapper div containing the label and input

Certain inputs have additional props; check the propTypes for more information.

Development

To develop

npm install
npm start

To run the demo

npm start

To build

npm run build

To publish a new version

Bump version in package.json

npm login
npm publish

You'll need to right credentials to publish to p2pu-input-fields