Changed font size scaling library

amamenko · Apr 4, 2021 · 3445146 · 3445146
1 parent 4a57165
commit 3445146
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 36 deletions.
diff --git a/example/package.json b/example/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "async-module-loader": "^2.1.0",
     "react": "^17.0.1",
-    "react-buzzfeed-quiz": "^1.0.9",
+    "react-buzzfeed-quiz": "^1.0.11",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.2",
     "styled-components": "^5.2.1",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "react-buzzfeed-quiz",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "React-friendly BuzzFeed Quiz Module",
   "main": "./lib/ReactBuzzFeedQuiz.js",
   "private": false,
   "dependencies": {
     "react-icons": "^4.2.0",
-    "react-scroll": "^1.8.1",
-    "react-textfit": "^1.1.1"
+    "react-scale-text": "^1.2.2",
+    "react-scroll": "^1.8.1"
   },
   "peerDependencies": {
     "react": ">=15.0.1",

diff --git a/src/components/Question.js b/src/components/Question.js
@@ -14,6 +14,7 @@ import { StyledQuestionOverlapText } from "./styled/Question/StyledQuestionOverl
 import { StyledQuestionImageContainer } from "./styled/Question/StyledQuestionImageContainer";
 import { StyledQuestionImage } from "./styled/Question/StyledQuestionImage";
 import { StyledTextfit } from "./styled/Question/StyledTextfit";
+import ScaleText from "react-scale-text";
 
 const Question = (props) => {
   const {
@@ -29,16 +30,14 @@ const Question = (props) => {
   } = props;
 
   const [answerHovered, changeAnswerHovered] = useState("");
-  const [componentMounted, changeComponentMounted] = useState(false);
 
-  // Tells TextFit to update itself now that component has been initially mounted
+  // Necessary for ScaleText to refresh font-size right after component mount
   useEffect(() => {
-    if (!componentMounted) {
-      setTimeout(() => {
-        changeComponentMounted(true);
-      }, 100);
-    }
-  }, [componentMounted]);
+    setTimeout(() => {
+      changeAnswerHovered(0);
+      changeAnswerHovered("");
+    }, 400);
+  }, []);
 
   const handleAnswerSelection = (
     questionIndex,
@@ -239,10 +238,18 @@ const Question = (props) => {
                       <p className="rbq_answer_text">{x.answer}</p>
                     ) : (
                       <StyledTextfit
-                        componentMounted={componentMounted}
                         hovered={answerHovered === answerIndex}
+                        fontColor={
+                          x.fontColor
+                            ? x.fontColor
+                            : generalFontColor
+                            ? generalFontColor
+                            : null
+                        }
                       >
-                        {x.answer}
+                        <ScaleText>
+                          <p>{x.answer}</p>
+                        </ScaleText>
                       </StyledTextfit>
                     )}
                   </StyledIndividualAnswerContainer>

diff --git a/src/components/styled/Question/StyledTextfit.js b/src/components/styled/Question/StyledTextfit.js
@@ -1,15 +1,27 @@
 import styled from "styled-components";
-import Textfit from "react-textfit/lib/Textfit";
 
-export const StyledTextfit = styled(Textfit)`
-  color: white;
+export const StyledTextfit = styled.div`
   position: relative;
-  height: 60%;
-  width: 60%;
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 60%;
+  padding: 1rem;
   transition: transform 0.15s cubic-bezier(0.64, 0.57, 0.67, 1.53);
+  color: ${(props) => (props.fontColor ? props.fontColor : "#fff")};
+
+  p {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
   cursor: ${(props) =>
     props.hovered