Merge pull request #356 from FormidableLabs/task/fix-live-preview-types

Fix live preview types
FormidableLabs · May 11, 2023 · c82c336 · c82c336
2 parents eea1186 + a2f5bd6
commit c82c336
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/.changeset/nice-ligers-leave.md b/.changeset/nice-ligers-leave.md
@@ -0,0 +1,5 @@
+---
+"react-live": patch
+---
+
+Fix live preview types. @kyletsang
diff --git a/packages/react-live/src/components/Live/LivePreview.tsx b/packages/react-live/src/components/Live/LivePreview.tsx
@@ -1,15 +1,16 @@
-import React, { PropsWithChildren, useContext } from "react";
+import React, { useContext } from "react";
 import LiveContext from "./LiveContext";
 
-type Props = {
-  Component?: React.ComponentType<PropsWithChildren<Record<string, unknown>>>;
-};
+type Props<T extends React.ElementType = React.ElementType> = {
+  Component?: T;
+} & React.ComponentPropsWithoutRef<T>;
 
-const fallbackComponent = (
-  props: PropsWithChildren<Record<string, unknown>>
-) => <div {...props} />;
+function LivePreview<T extends keyof JSX.IntrinsicElements>(
+  props: Props<T>
+): JSX.Element;
+function LivePreview<T extends React.ElementType>(props: Props<T>): JSX.Element;
 
-function LivePreview({ Component = fallbackComponent, ...rest }: Props) {
+function LivePreview({ Component = "div", ...rest }: Props): JSX.Element {
   const { element: Element } = useContext(LiveContext);
   return <Component {...rest}>{Element ? <Element /> : null}</Component>;
 }