Change passing of example components (#6049)

Because of new InteractiveExample structure for `Examples` section to work properly we needed to change passed example components from JSX.Elements to functional components. Also refreshing Examples that were not based on width of the parent container was fixed.
software-mansion · May 27, 2024 · 4485509 · 4485509
1 parent af6ebb3
commit 4485509
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 11 deletions.
diff --git a/docs/blog/accordion.md b/docs/blog/accordion.md
@@ -9,7 +9,7 @@ import Accordion from '@site/static/examples/Accordion';
 import AccordionSrc from '!!raw-loader!@site/static/examples/Accordion';
 import ExampleVideo from '@site/src/components/ExampleVideo';
 
-<InteractiveExample src={AccordionSrc} component={<Accordion />} />
+<InteractiveExample src={AccordionSrc} component={Accordion} />
 
 The following implementation of an accordion relies on [shared values](/docs/fundamentals/glossary#shared-value). Leveraging shared values helps to prevent unnecessary re-renders. We define shared values using the useSharedValue hook.
 

diff --git a/docs/blog/bottom-sheet.md b/docs/blog/bottom-sheet.md
@@ -10,7 +10,7 @@ import BottomSheetSrc from '!!raw-loader!@site/static/examples/BottomSheet';
 import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
-<InteractiveExample src={BottomSheetSrc} component={<BottomSheet />} />
+<InteractiveExample src={BottomSheetSrc} component={BottomSheet} />
 
 The **BottomSheet** component accepts props such as `isOpen` - a [shared value](/docs/fundamentals/glossary#shared-value) indicating whether the bottom sheet is open or closed, `toggleSheet` - a function to toggle the visibility of the bottom sheet, and an optional `duration` for animation.
 

diff --git a/docs/blog/flip-card.md b/docs/blog/flip-card.md
@@ -9,7 +9,7 @@ import FlipCard from '@site/static/examples/FlipCard';
 import FlipCardSrc from '!!raw-loader!@site/static/examples/FlipCard';
 import ExampleVideo from '@site/src/components/ExampleVideo';
 
-<InteractiveExample src={FlipCardSrc} component={<FlipCard />} />
+<InteractiveExample src={FlipCardSrc} component={FlipCard} />
 
 For storing information about whether the card is flipped or not we use [shared value](/docs/fundamentals/glossary#shared-value) with the `useSharedValue` hook. Using shared values helps to prevent unnecessary re-renders.
 
@@ -19,8 +19,8 @@ This allows us to [interpolate](/docs/utilities/interpolate) values between 0-18
 
 <CollapsibleCode src={FlipCardSrc} showLines={[62,64]} />
 
-<ExampleVideo 
-    sources={{ 
+<ExampleVideo
+sources={{
         android: "/react-native-reanimated/recordings/examples/flip_card_android.mov",
         ios: "/react-native-reanimated/recordings/examples/flip_card_ios.mov"
     }}
@@ -31,4 +31,3 @@ The **FlipCard** component accepts several props: `duration` allows you to chang
 <samp id="FlipCard">Flip Card</samp>
 
 <CollapsibleCode src={FlipCardSrc} showLines={[51,103]} />
-
diff --git a/docs/blog/marquee.md b/docs/blog/marquee.md
@@ -10,7 +10,7 @@ import MarqueeSrc from '!!raw-loader!@site/static/examples/Marquee';
 import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
-<InteractiveExample src={MarqueeSrc} component={<Marquee />} />
+<InteractiveExample src={MarqueeSrc} component={Marquee} />
 
 Now, let's understand how this example works:
 

diff --git a/docs/blog/section-list.md b/docs/blog/section-list.md
@@ -10,7 +10,7 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 Section lists allow you to organize long lists of content by dividing them with headings.
 
-<InteractiveExample src={SectionListSrc} component={<SectionList />} />
+<InteractiveExample src={SectionListSrc} component={SectionList} />
 
 The primary component, **SectionList**, acts as the main orchestrator of the entire Section List interface. It coordinates the rendering of the table of contents and individual content sections.
 

diff --git a/docs/blog/switch.md b/docs/blog/switch.md
@@ -10,7 +10,7 @@ import SwitchSrc from '!!raw-loader!@site/static/examples/Switch';
 import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
-<InteractiveExample src={SwitchSrc} component={<Switch />} />
+<InteractiveExample src={SwitchSrc} component={Switch} />
 
 The following implementation of a switch relies on [animatable values](/docs/fundamentals/glossary#animatable-value). Leveraging animatable values of color and position enables smooth transition between the two states.
 

diff --git a/docs/src/components/InteractiveExample/index.tsx b/docs/src/components/InteractiveExample/index.tsx
@@ -93,7 +93,6 @@ export default function InteractiveExample({
   const [tab, setTab] = React.useState<Tab>(Tab.PREVIEW);
   const [jsxCode, setJsxCode] = React.useState(() => compileTSXtoJSX(tsxCode));
   const [width, setWidth] = React.useState<number | null>(null);
-  const [showPreview, setShowPreview] = React.useState(!showCode);
 
   const interactiveExampleRef = React.useRef<HTMLDivElement>(null);
 
@@ -170,7 +169,7 @@ export default function InteractiveExample({
             {tab === Tab.PREVIEW ? (
               <>
                 <React.Fragment key={key}>
-                  {width !== null && <Component width={width} />}
+                  <Component width={width !== null ? width : 0} />
                 </React.Fragment>
 
                 <div