From 650ab36b1cd4a48b4867bce9a94523324c4cc9e4 Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Thu, 12 Sep 2024 11:43:16 -0300
Subject: [PATCH] Update custom-components docs

---
 docs/custom-components.md | 120 +++++++++++++++++++++-----------------
 1 file changed, 66 insertions(+), 54 deletions(-)

diff --git a/docs/custom-components.md b/docs/custom-components.md
index 0f327f5a3..f0e4a7dda 100644
--- a/docs/custom-components.md
+++ b/docs/custom-components.md
@@ -22,8 +22,11 @@ If you want to customize the default UI, check the [styling](styling.md) docs.
 
 ### Example with styled-components
 
-```jsx
-import Joyride, { BeaconRenderProps, TooltipRenderProps } from 'react-joyride';
+```tsx
+import { forwardRef } from 'react';
+import Joyride, { BeaconRenderProps } from 'react-joyride';
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
 
 const pulse = keyframes`
   0% {
@@ -45,15 +48,20 @@ const Beacon = styled.span`
   width: 3rem;
 `;
 
-export () => (
-  <div>
-    <ReactJoyride
-      beaconComponent={BeaconComponent}
-      // beaconComponent={BeaconComponent as React.ElementType<BeaconRenderProps>} for TS
-      ...
-    />
-  </div>
-);
+const BeaconComponent = forwardRef<HTMLButtonElement, BeaconRenderProps>((props, ref) => {
+  return <Beacon ref={ref} {...props} />;
+});
+
+export function App() {
+  return (
+    <div>
+      <Joyride
+        beaconComponent={BeaconComponent}
+        // ...
+      />
+    </div>
+  );
+}
 ```
 
 ## tooltipComponent
@@ -80,47 +88,51 @@ export () => (
 
 **tooltipProps** {object}: The root element props \(including `ref`\)
 
-### Example with styled-components
-
-```jsx
-const Tooltip = ({
-  continuous,
-  index,
-  step,
-  backProps,
-  closeProps,
-  primaryProps,
-  tooltipProps,
-}) => (
-  <TooltipBody {...tooltipProps}>
-    {step.title && <TooltipTitle>{step.title}</TooltipTitle>}
-    <TooltipContent>{step.content}</TooltipContent>
-    <TooltipFooter>
-      {index > 0 && (
-        <Button {...backProps}>
-          <FormattedMessage id="back" />
-        </Button>
-      )}
-      {continuous && (
-        <Button {...primaryProps}>
-          <FormattedMessage id="next" />
-        </Button>
-      )}
-      {!continuous && (
-        <Button {...closeProps}>
-          <FormattedMessage id="close" />
-        </Button>
-      )}
-    </TooltipFooter>
-  </TooltipBody>
-);
-
-export () => (
-  <div>
-    <ReactJoyride
-      tooltipComponent={Tooltip}
-      ...
-    />
-  </div>
-);
+### Example with css classes
+
+```tsx
+import Joyride, { TooltipRenderProps } from 'react-joyride';
+
+function CustomTooltip(props: TooltipRenderProps) {
+  const { backProps, closeProps, continuous, index, primaryProps, skipProps, step, tooltipProps } =
+    props;
+
+  return (
+    <div className="tooltip__body" {...tooltipProps}>
+      <button className="tooltip__close" {...closeProps}>
+        &times;
+      </button>
+      {step.title && <h4 className="tooltip__title">{step.title}</h4>}
+      <div className="tooltip__content">{step.content}</div>
+      <div className="tooltip__footer">
+        <button className="tooltip__button" {...skipProps}>
+          {skipProps.title}
+        </button>
+        <div className="tooltip__spacer">
+          {index > 0 && (
+            <button className="tooltip__button" {...backProps}>
+              {backProps.title}
+            </button>
+          )}
+          {continuous && (
+            <button className="tooltip__button tooltip__button--primary" {...primaryProps}>
+              {primaryProps.title}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <div>
+      <Joyride
+        tooltipComponent={CustomTooltip}
+        // ...
+      />
+    </div>
+  );
+}
 ```