Make the demo look better

xuhdev · xuhdev · commit 0dd11b1927de · 2024-04-25T20:40:16.000-07:00
diff --git a/index.html b/index.html
@@ -3,9 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>react-autonumeric Demo</title>
+    <title>React-AutoNumeric Demo</title>
   </head>
-  <body>
+  <body style="max-width: 600px; margin: 0 auto">
     <div id="root"></div>
     <script type="module" src="/src/demo/main.tsx"></script>
   </body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.5.0",
+    "bootstrap": "^5.3.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
diff --git a/src/demo/App.tsx b/src/demo/App.tsx
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import "bootstrap/dist/css/bootstrap.css";
+
 import AutoNumeric from "autonumeric";
 import { AutoNumericInput } from "../lib/AutoNumericInput";
 import { useState } from "react";
@@ -23,53 +25,58 @@ export default function App(): JSX.Element {
   const [controlledInputState, setControlledInputState] = useState("100");
   return (
     <>
-      <label>
-        Most basic usage
-        <AutoNumericInput />
-      </label>
-
-      <hr />
-
-      <label>
-        Customize the input
-        <AutoNumericInput
-          inputProps={{ defaultValue: "99.99" }}
-          autoNumericOptions={{ suffixText: "%" }}
-        />
-      </label>
-
-      <hr />
+      <h1>React-AutoNumeric Demo</h1>
+      <div className="form-group mb-3">
+        <label>
+          Most basic usage
+          <AutoNumericInput inputProps={{ className: "form-control" }} />
+        </label>
+      </div>
 
-      <label>
-        Use predefined AutoNumeric options
-        <AutoNumericInput
-          inputProps={{ defaultValue: "10000" }}
-          autoNumericOptions={
-            AutoNumeric.getPredefinedOptions().commaDecimalCharDotSeparator
-          }
-        />
-      </label>
+      <div className="form-group mb-3">
+        <label>
+          Customize the input
+          <AutoNumericInput
+            inputProps={{ defaultValue: "99.99", className: "form-control" }}
+            autoNumericOptions={{ suffixText: "%" }}
+          />
+        </label>
+      </div>
 
-      <hr />
+      <div className="form-group mb-3">
+        <label>
+          Use predefined AutoNumeric options
+          <AutoNumericInput
+            inputProps={{ defaultValue: "10000", className: "form-control" }}
+            autoNumericOptions={
+              AutoNumeric.getPredefinedOptions().commaDecimalCharDotSeparator
+            }
+          />
+        </label>
+      </div>
 
-      <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>
+      <div className="form-group mb-3">
+        <label>
+          Interact with AutoNumericInput via a React state
+          <AutoNumericInput
+            inputProps={{ className: "form-control" }}
+            valueState={{
+              state: controlledInputState,
+              stateSetter: setControlledInputState,
+            }}
+          />
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              setControlledInputState(
+                (Number(controlledInputState) + 1).toString(),
+              );
+            }}
+          >
+            Add one
+          </button>
+        </label>
+      </div>
     </>
   );
 }
