diff --git a/index.html b/index.html index 8d538a3..f3d4fca 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,9 @@ - react-autonumeric Demo + React-AutoNumeric Demo - +
diff --git a/package-lock.json b/package-lock.json index 87543bb..3a3883e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,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", @@ -1275,6 +1276,17 @@ "node": ">=14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "dev": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.14.3", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz", @@ -2542,6 +2554,25 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", diff --git a/package.json b/package.json index 41b3311..9b606f7 100644 --- 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 index 026a481..04245f0 100644 --- 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 ( <> - - -
- - - -
+

React-AutoNumeric Demo

+
+ +
- +
+ +
-
+
+ +
- +
+ +
); }