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