Fixed #123

Stanko · Apr 12, 2022 · f2daad9 · f2daad9
1 parent 1725e13
commit f2daad9
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 1,634 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+### v2.1.0
+
+12.04.2022.
+
+**Fixed**
+
+* Fixed component not working with React 18 and StrictMode - [#123](https://github.com/Stanko/react-animate-height/issues/123)
+
+-----
+
 ### v2.0.23
 
 01.08.2020.

diff --git a/docs/docs.scss → docs/docs.css b/docs/docs.scss → docs/docs.css
@@ -1,5 +1,3 @@
-$main-color: #E9463F;
-
 body {
   background: #fdfdfd;
 }
@@ -8,16 +6,18 @@ a,
 a:active,
 a:visited,
 a:focus {
-  color: $main-color;
+  color: #E9463F;
+  border-bottom: 1px solid transparent;
 }
 
 a:hover {
-  color: darken($main-color, 20);
+  color: #111;
+  border-bottom-color: #111;
 }
 
 h2, h3, h4 {
   margin-top: 50px;
-  color: $main-color;
+  color: #E9463F;
 }
 
 .header {
@@ -38,15 +38,15 @@ h2, h3, h4 {
   margin-right: 5px;
   transition: all 0.1s;
   background: #111;
+}
 
-  &:hover {
-    background: darken($main-color, 20);
-  }
+.buttons button:hover {
+  background: darken(#E9463F, 20);
+}
 
-  &:focus {
-    background: $main-color;
-    outline: none;
-  }
+.buttons button:focus {
+  background: #E9463F;
+  outline: none;
 }
 
 .demo {
@@ -60,9 +60,6 @@ h2, h3, h4 {
 
 .demo-3 {
   margin-bottom: 100px;
-
-  .demo-content {
-  }
 }
 
 .demo-3-wrapper {

diff --git a/docs/docs.js b/docs/docs.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import AnimateHeight from '../source/index';
-import './docs.scss';
+import './docs.css';
 
 const Example = class extends React.Component {
   constructor() {
@@ -283,5 +283,7 @@ const Example = class extends React.Component {
   }
 };
 
+const container = document.getElementById('demo');
+const root = createRoot(container);
 
-ReactDOM.render(<Example />, document.getElementById('demo'));
+root.render(<StrictMode><Example /></StrictMode>);
diff --git a/docs/index.html b/docs/index.html
@@ -9,20 +9,16 @@
     <link rel="stylesheet" href="https://muffinman.io/skyblue/css/skyblue.css">
 
     <!-- Icons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="https://muffinman.io/public/favicon/apple-touch-icon.png?v=v3">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://muffinman.io/public/favicon/favicon-32x32.png?v=v3">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://muffinman.io/public/favicon/favicon-16x16.png?v=v3">
-    <link rel="manifest" href="https://muffinman.io/public/favicon/manifest.json?v=v3">
-    <link rel="mask-icon" href="https://muffinman.io/public/favicon/safari-pinned-tab.svg?v=v3" color="#e04856">
-    <link rel="shortcut icon" href="https://muffinman.io/public/favicon/favicon.ico?v=v3">
-    <meta name="msapplication-config" content="https://muffinman.io/public/favicon/browserconfig.xml?v=v3">
-    <meta name="theme-color" content="#ffffff">
+    <link href="https://muffinman.io/favicon/red/icon-32.ico" rel="icon" sizes="any" />
+    <link href="https://muffinman.io/favicon/red/icon.svg" rel="icon" type="image/svg+xml" />
+    <link href="https://muffinman.io/favicon/red/icon-180.png" rel="apple-touch-icon" />
+    <link href="https://muffinman.io/favicon/red/manifest.webmanifest" rel="manifest" />
   </head>
   <body>
     <div class='header'>
       <div class='content'>
-        <a href='https://muffinman.io' class='padding-right-20'>My blog</a>
-        <a href='https://github.com/Stanko/react-animate-height' class='padding-right-20'>GitHub</a>
+        <a href='https://muffinman.io' class='margin-right-20'>My blog</a>
+        <a href='https://github.com/Stanko/react-animate-height' class='margin-right-20'>GitHub</a>
         <a href='https://www.npmjs.com/package/react-animate-height'>npm</a>
       </div>
     </div>
@@ -38,7 +34,7 @@ <h1>React Animate Height</h1>
       <p>CSS classes are applied in specific animation states, check <code>animationStateClasses</code> prop.</p>
       <p>
         Detailed documentation is available on
-        <a href='https://github.com/Stanko/react-animate-height' class='padding-right-20'>GitHub</a>
+        <a href='https://github.com/Stanko/react-animate-height'>GitHub</a>.
       </p>
 
       <h3>Usage</h3>