Put readmes back

packages/website/.gitignore

@@ -1,3 +1,2 @@
 dist
-out
-_readmes
+out

packages/website/_readmes/boundingclientrect.md

@@ -0,0 +1,77 @@
+# @rooks/use-boundingclientrect
+
+### Installation
+
+```
+npm install --save @rooks/use-boundingclientrect
+```
+
+### Usage
+
+```jsx
+function Demo() {
+  const myRef = useRef();
+  const getBoundingClientRect = useBoundingclientrect(myRef);
+  const [XOffset, setXOffset] = useState(0);
+  const [YOffset, setYOffset] = useState(300);
+  const displayString = JSON.stringify(getBoundingClientRect, null, 2);
+  return (
+    <>
+      <div
+        style={{
+          width: 300,
+          background: "lightblue",
+          padding: "10px",
+          position: "absolute",
+          left: XOffset,
+          top: YOffset
+        }}
+        ref={myRef}
+      >
+        <div
+          style={{
+            resize: "both",
+            overflow: "auto",
+            background: "white",
+            color: "blue",
+            maxWidth: "100%"
+          }}
+        >
+          <p>
+            Resize this div as you see fit. To demonstrate that it also updates
+            on child dom nodes resize
+          </p>
+        </div>
+        <h2>Bounds</h2>
+        <p>
+          <button onClick={() => setXOffset(XOffset - 5)}> Move Left </button>
+          <button onClick={() => setXOffset(XOffset + 5)}> Move Right </button>
+        </p>
+        <p>
+          <button onClick={() => setYOffset(YOffset - 5)}> Move Up </button>
+          <button onClick={() => setYOffset(YOffset + 5)}> Move Down </button>
+        </p>
+      </div>
+      <div style={{ height: 500 }}>
+        <pre>{displayString}</pre>
+      </div>
+    </>
+  );
+}
+
+render(<Demo/>)
+```
+
+### Arguments
+
+| Argument | Type      | Description                                       |
+| -------- | --------- | ------------------------------------------------- |
+| ref      | React ref | React ref whose boundingClientRect is to be found |
+
+### Return
+
+| Return value | Type    | Description                                                                  | Default value |
+| ------------ | ------- | ---------------------------------------------------------------------------- | ------------- |
+| value        | DOMRect | DOMRect Object containing x,y, width, height, left,right,top and bottom keys | null          |
+
+Bounding client rect hook for React.

packages/website/_readmes/counter.md

@@ -0,0 +1,58 @@
+# @rooks/use-counter
+
+### Installation
+
+```
+npm install --save @rooks/use-counter
+```
+
+### Usage
+
+```jsx
+function CounterComponent() {
+  const {
+    value,
+    increment,
+    decrement,
+    incrementBy,
+    decrementBy,
+    reset
+  } = useCounter(3);
+
+
+  function incrementBy5(){
+     incrementBy(5)
+  }
+  function decrementBy7(){
+     decrementBy(7)
+  }
+
+  return <>
+      Current value is {value}
+      <hr/>
+      <button onClick={increment}>increment</button>
+      <button onClick={decrement}>decrement</button>
+      <button onClick={incrementBy5} >incrementBy5</button>
+      <button onClick={decrementBy7} >decrementBy7</button>
+      <hr/>
+      <button onClick={reset}>reset</button>
+  </>;
+}
+
+render(<CounterComponent/>)
+```
+
+### Arguments
+
+| Argument     | Type   | Description                  |
+| ------------ | ------ | ---------------------------- |
+| initialValue | number | Initial value of the counter |
+
+
+### Return
+
+| Return value | Type   | Description                                                                 |
+| ------------ | ------ | --------------------------------------------------------------------------- |
+| counter      | Object | Object containing {value,increment,decrement,incrementBy,decrementBy,reset} |
+
+Counter hook for React.

packages/website/_readmes/did-mount.md

@@ -0,0 +1,28 @@
+# @rooks/use-did-mount
+
+### Installation
+
+```
+npm install --save @rooks/use-did-mount
+```
+
+### Usage
+
+```jsx
+function Demo() {
+  useDidMount(function(){
+    console.log("mounted")
+  });
+  return null
+}
+
+render(<Demo/>)
+```
+
+### Arguments
+
+| Argument | Type     | Description                    |
+| -------- | -------- | ------------------------------ |
+| callback | function | function to be called on mount |
+
+# A React hooks package for componentDidMount.

packages/website/_readmes/input.md

@@ -0,0 +1,69 @@
+# @rooks/use-input
+
+### Installation
+
+```
+npm install --save @rooks/use-input
+```
+
+### Usage
+
+**Base**
+
+```jsx
+function Demo() {
+  const myInput = useInput("hello");
+  return (
+    <div>
+      <input {...myInput} />
+      <p>
+        Value is <b>{myInput.value}</b>
+      </p>
+    </div>
+  );
+}
+
+render(<Demo/>)
+```
+
+**With optional validator**
+
+```jsx
+function Demo() {
+  const myInput = useInput("hello", {
+    validate: value => true
+  });
+  return (
+    <div>
+      <input {...myInput} />
+      <p>
+        Value is <b>{myInput.value}</b>
+      </p>
+    </div>
+  );
+}
+
+render(<Demo/>)
+```
+
+### Arguments
+
+| Argument     | Type   | Description                 | Default value |
+| ------------ | ------ | --------------------------- | ------------- |
+| initialValue | string | Initial value of the string | ""            |
+| opts         | object | Options                     | {}            |
+
+
+### Options
+
+| Option key | Type     | Description                                                                                    | Default value |
+| ---------- | -------- | ---------------------------------------------------------------------------------------------- | ------------- |
+| validate   | function | Validator function which receives changed valued before update and should return true or false | undefined     |
+
+### Return value
+
+| Return value      | Type   | Description                                                                                                          |
+| ----------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
+| {value, onChange} | Object | Object containing {value : "String", onChange: "function that accepts an event and updates the value of the string"} |
+
+Input hook for React.

packages/website/_readmes/interval.md

@@ -0,0 +1,62 @@
+# @rooks/use-interval
+
+### Installation
+
+```
+npm install --save @rooks/use-interval
+```
+
+### Usage
+
+```jsx
+function reducer(state, action) {
+  switch (action.type) {
+    case "increment":
+      return { count: state.count + 1 };
+    default:
+      return state;
+  }
+}
+
+function Demo() {
+  const [value, dispatcher] = useReducer(reducer, { count: 0 });
+
+  function increment() {
+    dispatcher({
+      type: "increment"
+    });
+  }
+
+  const { start, stop } = useInterval(() => {
+    increment();
+  }, 1000);
+
+  return (
+    <>
+      <p>value is {value.count}</p>
+      <button onClick={start}>Start</button>
+      <button onClick={stop}>Stop</button>
+    </>
+  );
+}
+render(<Demo/>)
+```
+
+### Arguments
+
+| Argument         | Type     | Description                                              | Default value |
+| ---------------- | -------- | -------------------------------------------------------- | ------------- |
+| callback         | function | Function be invoked after each interval duration         | undefined     |
+| intervalDuration | number   | Duration in milliseconds after which callback is invoked | undefined     |
+| startImmediate   | boolean  | Should the timer start immediately or no                 | false         |
+
+### Returned Object
+
+| Returned object attributes | Type       | Description                |
+| -------------------------- | ---------- | -------------------------- |
+| start                      | function   | Start the interval         |
+| stop                       | function   | Stop the interval          |
+| intervalId                 | intervalId | IntervalId of the interval |
+
+
+# A react hook for using setInterval.