Details in README (#11)

Author: xuhdev

README.md

@@ -1,3 +1,74 @@
-# react-autonumeric
+# React-AutoNumeric: React Components that Wrap [AutoNumeric][]
 
-Autonumeric as a React component.
+[AutoNumeric][] is a powerful library that automatically format numbers and currencies.
+React-AutoNumeric brings that power to React.
+
+## Install
+
+```
+npm install --save react-autonumeric
+```
+
+## Usage
+
+### Most basic usage
+
+```tsx
+<AutoNumericInput />
+```
+
+creates an [input component][] that is automatically formatted by AutoNumeric.
+
+### Customize the input
+
+```tsx
+<AutoNumericInput
+  inputProps={{ defaultValue: "99.99" }}
+  autoNumericOptions={{ suffixText: "%" }}
+/>
+```
+
+### Use predefined AutoNumeric options
+
+```tsx
+<AutoNumericInput
+  inputProps={{ defaultValue: "10000" }}
+  autoNumericOptions={
+    AutoNumeric.getPredefinedOptions().commaDecimalCharDotSeparator
+  }
+/>
+```
+
+### Interact with `AutoNumericInput` via a React state
+
+```tsx
+const [controlledInputState, setControlledInputState] = useState("100");
+
+<AutoNumericInput
+  valueState={{
+    state: controlledInputState,
+    stateSetter: setControlledInputState,
+  }}
+/>
+<button
+  onClick={() => {
+    setControlledInputState(
+      (Number(controlledInputState) + 1).toString(),
+    );
+  }}
+>
+  Add one
+</button>
+```
+
+### API References
+
+For more detailed usage, check out the {@link AutoNumericInput} API references.
+
+### Non-Input Usage
+
+If you would like a component other than input that is automatically formatted by AutoNumeric,
+please consult {@link AutoNumericComponent}.
+
+[AutoNumeric]: https://autonumeric.org/
+[input component]: https://react.dev/reference/react-dom/components/input

src/demo/App.tsx

@@ -15,28 +15,61 @@
  * limitations under the License.
  */
 
+import AutoNumeric from "autonumeric";
 import { AutoNumericInput } from "../lib/AutoNumericInput";
 import { useState } from "react";
 
 export default function App(): JSX.Element {
-  const [controlledInputState, setControlledInputState] = useState("2222");
+  const [controlledInputState, setControlledInputState] = useState("100");
   return (
     <>
-      <AutoNumericInput />
-
-      <AutoNumericInput
-        valueState={{
-          state: controlledInputState,
-          stateSetter: setControlledInputState,
-        }}
-      />
-      <button
-        onClick={() => {
-          setControlledInputState("1111");
-        }}
-      >
-        Reset to 1111
-      </button>
+      <label>
+        Most basic usage
+        <AutoNumericInput />
+      </label>
+
+      <hr />
+
+      <label>
+        Customize the input
+        <AutoNumericInput
+          inputProps={{ defaultValue: "99.99" }}
+          autoNumericOptions={{ suffixText: "%" }}
+        />
+      </label>
+
+      <hr />
+
+      <label>
+        Use predefined AutoNumeric options
+        <AutoNumericInput
+          inputProps={{ defaultValue: "10000" }}
+          autoNumericOptions={
+            AutoNumeric.getPredefinedOptions().commaDecimalCharDotSeparator
+          }
+        />
+      </label>
+
+      <hr />
+
+      <label>
+        Interact with AutoNumericInput via a React state
+        <AutoNumericInput
+          valueState={{
+            state: controlledInputState,
+            stateSetter: setControlledInputState,
+          }}
+        />
+        <button
+          onClick={() => {
+            setControlledInputState(
+              (Number(controlledInputState) + 1).toString(),
+            );
+          }}
+        >
+          Add one
+        </button>
+      </label>
     </>
   );
 }