From 0d3fbf1bee2305eb7abac65bfcd12662b6e24578 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Thu, 29 Jun 2023 15:15:39 -0400
Subject: [PATCH 1/2] Use js default parameters instead of defaultProps

#16
---
 src/index.js | 52 ++++++++++++++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/index.js b/src/index.js
index 669120c..3bbc56e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,7 +9,18 @@ const LOAD_STATE = {
   loaded: '__loaded__',
 };
 
-const ReactCodepen = props => {
+const ReactCodepen = ({
+  defaultTab = 'css,result',
+  height = 300,
+  preview = true,
+  editable = false,
+  themeId = 'dark',
+  version = 2,
+  loader,
+  user,
+  hash,
+  title
+}) => {
   const [loadState, setLoadState] = useState(LOAD_STATE.booting);
   const [error, setError] = useState();
   const _isMounted = useRef(false);
@@ -43,48 +54,41 @@ const ReactCodepen = props => {
   }, []);
 
   const showLoader =
-    loadState === LOAD_STATE.loading && props.loader !== undefined;
+    loadState === LOAD_STATE.loading && loader !== undefined;
   const visibility = loadState === LOAD_STATE.loaded ? 'visible' : 'hidden';
-  const penLink = `https://codepen.io/${props.user}/pen/${props.hash}/`;
-  const userProfileLink = `https://codepen.io/${props.user}`;
+  const penLink = `https://codepen.io/${user}/pen/${hash}/`;
+  const userProfileLink = `https://codepen.io/${user}`;
   const styles = { visibility };
 
   return (
     <React.Fragment>
       {showLoader &&
-        React.createElement(props.loader, {
+        React.createElement(loader, {
           isLoading: loadState === LOAD_STATE.loading,
           error,
         })}
       <p
-        data-height={props.height}
-        data-theme-id={props.themeId}
-        data-slug-hash={props.hash}
-        data-default-tab={props.defaultTab}
-        data-user={props.user}
-        data-embed-version={props.version}
-        data-pen-title={props.title}
-        data-preview={props.preview}
-        data-editable={props.editable}
+        data-height={height}
+        data-theme-id={themeId}
+        data-slug-hash={hash}
+        data-default-tab={defaultTab}
+        data-user={user}
+        data-embed-version={version}
+        data-pen-title={title}
+        data-preview={preview}
+        data-editable={editable}
         className="codepen"
         style={styles}
       >
-        See the Pen <a href={penLink}>{props.title}</a>
-        by {props.user} (<a href={userProfileLink}>@{props.user}</a>) on{' '}
+        See the Pen <a href={penLink}>{title}</a>
+        by {user} (<a href={userProfileLink}>@{user}</a>) on{' '}
         <a href="https://codepen.io">CodePen</a>.
       </p>
     </React.Fragment>
   );
 };
 
-ReactCodepen.defaultProps = {
-  defaultTab: 'css,result',
-  height: 300,
-  preview: true,
-  editable: false,
-  themeId: 'dark',
-  version: 2,
-};
+
 
 ReactCodepen.propTypes = {
   defaultTab: PropTypes.string,

From 16e915f40c5df9a2369e73bfefd60a71746ab958 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Thu, 29 Jun 2023 15:15:49 -0400
Subject: [PATCH 2/2] format

---
 src/index.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index 3bbc56e..afa2611 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,7 +19,7 @@ const ReactCodepen = ({
   loader,
   user,
   hash,
-  title
+  title,
 }) => {
   const [loadState, setLoadState] = useState(LOAD_STATE.booting);
   const [error, setError] = useState();
@@ -53,8 +53,7 @@ const ReactCodepen = ({
     return () => (_isMounted.current = false);
   }, []);
 
-  const showLoader =
-    loadState === LOAD_STATE.loading && loader !== undefined;
+  const showLoader = loadState === LOAD_STATE.loading && loader !== undefined;
   const visibility = loadState === LOAD_STATE.loaded ? 'visible' : 'hidden';
   const penLink = `https://codepen.io/${user}/pen/${hash}/`;
   const userProfileLink = `https://codepen.io/${user}`;
@@ -88,8 +87,6 @@ const ReactCodepen = ({
   );
 };
 
-
-
 ReactCodepen.propTypes = {
   defaultTab: PropTypes.string,
   hash: PropTypes.string.isRequired,