Merge pull request #213 from wingkwong/feat/nanoid

feat: nanoid

Author: wingkwong

package-lock.json

@@ -31,6 +31,8 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "babel-loader": "^9.1.3",
+    "css-loader": "^6.0.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.4.1",
     "eslint-config-airbnb": "^19.0.2",
     "eslint-plugin-import": "^2.25.3",
@@ -39,16 +41,14 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "html-webpack-plugin": "5.6.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "css-minimizer-webpack-plugin": "^6.0.0",
     "prop-types": "^15.7.2",
     "rollup": "^4.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "terser-webpack-plugin": "^5.3.9",
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
-    "css-loader": "^6.0.0"
+    "webpack-dev-server": "^4.7.4"
   },
   "author": "WK Wong <wingkwong.code@gmail.com>",
   "homepage": "https://github.com/wingkwong/react-quiz-component",
@@ -58,9 +58,9 @@
   },
   "dependencies": {
     "dompurify": "^3.0.0",
+    "nanoid": "^5.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "snarkdown": "^2.0.0",
-    "uuid": "^9.0.1"
+    "snarkdown": "^2.0.0"
   }
 }

package.json

@@ -1,7 +1,7 @@
 import React, {
   useState, useEffect, useCallback, Fragment,
 } from 'react';
-import { v4 as uuidv4 } from 'uuid';
+import { nanoid } from 'nanoid';
 import QuizResultFilter from './core-components/QuizResultFilter';
 import { checkAnswer, selectAnswer, rawMarkup } from './core-components/helpers';
 import InstantFeedback from './core-components/InstantFeedback';
@@ -147,7 +147,7 @@ function Core({
       }
 
       return (
-        <div key={uuidv4()}>
+        <div key={nanoid()}>
           <button
             type="button"
             disabled
@@ -222,7 +222,7 @@ function Core({
       const answerSelectionType = question.answerSelectionType || 'single';
 
       return (
-        <div className="result-answer-wrapper" key={uuidv4()}>
+        <div className="result-answer-wrapper" key={nanoid()}>
           <h3
             dangerouslySetInnerHTML={rawMarkup(
               `Q${question.questionIndex}: ${
@@ -296,7 +296,7 @@ function Core({
     answerSelectionType = answerSelectionType || 'single';
 
     return answers.map((answer, index) => (
-      <Fragment key={uuidv4()}>
+      <Fragment key={nanoid()}>
         {(answerButtons[index] !== undefined)
           ? (
             <button