Merge pull request #28 from 30-seconds/input-snippets

Input snippets

snippets/Input.md

@@ -0,0 +1,31 @@
+### Input
+
+Renders an `<input>` element that uses a callback function to pass its value to the parent component.
+
+Use object destructuring to set defaults for certain attributes of the `<input>` element.
+Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+
+```jsx
+function Input ({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
+  return (
+    <input 
+      type={type} 
+      disabled={disabled} 
+      readOnly={readOnly} 
+      placeholder={placeholder}
+      onChange={(event) => callback(event.target.value)} 
+    />
+  );
+}
+```
+
+```jsx
+ReactDOM.render(
+  <Input type='text' placeholder='Insert some text here...' callback={(val) => console.log(val)}/>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: input,functional -->
+
+<!-- expertise: 0 -->

snippets/Select.md

@@ -0,0 +1,38 @@
+### Select
+
+Renders a `<select>` element that uses a callback function to pass its value to the parent component.
+
+Use object destructuring to set defaults for certain attributes of the `<select>` element.
+Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+Use the `values` array to pass an array of `[value, text]` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
+
+```jsx
+function Select ({ values, callback, disabled = false, readonly = false, selected }) {
+  return (
+    <select 
+      disabled={disabled} 
+      readOnly={readonly} 
+      onChange={(event) => callback(event.target.value)} 
+    >
+      {values.map(v => <option selected={selected === v[0]}value={v[0]}>{v[1]}</option>)}
+    </select>
+  );
+}
+```
+
+```jsx
+let choices = [
+  ['grapefruit', 'Grapefruit'],
+  ['lime', 'Lime'],
+  ['coconut', 'Coconut'],
+  ['mango', 'Mango']
+];
+ReactDOM.render(
+  <Select values={choices} selected='lime' callback={(val) => console.log(val)}/>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: input,functional -->
+
+<!-- expertise: 0 -->

snippets/TextArea.md

@@ -0,0 +1,32 @@
+### TextArea
+
+Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
+
+Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
+Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+
+```jsx
+function TextArea ({ callback, cols = 20, rows = 2, disabled = false, readOnly = false, placeholder='' }) {
+  return (
+    <textarea 
+      cols={cols}
+      rows={rows}
+      disabled={disabled} 
+      readOnly={readOnly} 
+      placeholder={placeholder}
+      onChange={(event) => callback(event.target.value)} 
+    />
+  );
+}
+```
+
+```jsx
+ReactDOM.render(
+  <TextArea placeholder='Insert some text here...' callback={(val) => console.log(val)}/>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: input,functional -->
+
+<!-- expertise: 0 -->