Merge pull request #392 from kaisermann/fix-jsx-ref

Replace JSX.Element with React.ReactElement

Author: timolins

site/components/emoji-button.tsx

@@ -1,6 +1,6 @@
 export const EmojiButton: React.FC<{
   onClick: () => void;
-  emoji: string | JSX.Element;
+  emoji: string | React.ReactElement;
   children?: React.ReactNode;
 }> = ({ onClick, children, emoji }) => (
   <button

site/pages/index.tsx

@@ -32,7 +32,7 @@ const Step: React.FC<{
   count: number;
   title: string;
   subTitle: string;
-  code: JSX.Element;
+  code: React.ReactElement;
 }> = (props) => (
   <div className="flex flex-col gap-1 items-center">
     <div className="h-6 w-6 mb-2 text-sm rounded-full bg-toast-900 text-toast-50 flex items-center justify-center">

site/types/mdx.d.ts

@@ -1,4 +1,4 @@
 declare module '*.mdx' {
-  let MDXComponent: (props: any) => JSX.Element;
+  let MDXComponent: (props: any) => React.ReactElement;
   export default MDXComponent;
 }

src/core/types.ts

@@ -9,7 +9,7 @@ export type ToastPosition =
   | 'bottom-center'
   | 'bottom-right';
 
-export type Renderable = JSX.Element | string | null;
+export type Renderable = React.ReactElement | string | null;
 
 export interface IconTheme {
   primary: string;
@@ -82,7 +82,7 @@ export interface ToasterProps {
   gutter?: number;
   containerStyle?: React.CSSProperties;
   containerClassName?: string;
-  children?: (toast: Toast) => JSX.Element;
+  children?: (toast: Toast) => React.ReactElement;
 }
 
 export interface ToastWrapperProps {