update readme

p2pu · Jun 6, 2020 · b7a5a0b · b7a5a0b
1 parent d3e9872
commit b7a5a0b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 15 deletions.
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -4,16 +4,7 @@
     <title>P2PU Input Fields Demo</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
-    <script
-      src="https://code.jquery.com/jquery-3.3.1.min.js"
-      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-      crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </head>
 <body>
     <noscript>

diff --git a/readme.md b/readme.md
@@ -1,24 +1,81 @@
-# Input fields for P2PU projects# Search component for P2PU projects
+# Input fields for P2PU projects
+
+
+## Requirements
+
+- Bootstrap CSS
+- React
 
 ## Usage
-??
+
+### Example
+
+See `demo/src/index.js` for more examples
+
+```js
+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 i
-npm run build:es
-npm run build:umd
+npm run build
 ```
 
 To publish a new version
 
 Bump version in package.json
 
 ```
-npm adduser
+npm login
 npm publish
 ```