Fix types for @types/react@18 (#1798)

* Fix types for React v18 Ref: #1062 (comment) Ref: https://github.com/eps1lon/types-react-codemod#implicit-children Ref: DefinitelyTyped/DefinitelyTyped#46691 * add changeset --------- Co-authored-by: Dmitry Ivakhnenko <[email protected]>
diegomura · Jan 28, 2023 · 17a8006 · 17a8006
1 parent 327f071
commit 17a8006
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 deletions.
diff --git a/.changeset/nice-buttons-joke.md b/.changeset/nice-buttons-joke.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/renderer': patch
+---
+
+fix types for @types/react@18
diff --git a/packages/renderer/index.d.ts b/packages/renderer/index.d.ts
@@ -38,7 +38,7 @@ declare namespace ReactPDF {
    * used as children of another react-pdf component. In addition, it should
    * only have childs of type <Page />.
    */
-  class Document extends React.Component<DocumentProps> {}
+  class Document extends React.Component<React.PropsWithChildren<DocumentProps>> {}
 
   interface NodeProps {
     id?: string;
@@ -85,7 +85,7 @@ declare namespace ReactPDF {
    * you want, but ensure not rendering a page inside any component besides
    * Document.
    */
-  class Page extends React.Component<PageProps> {}
+  class Page extends React.Component<React.PropsWithChildren<PageProps>> {}
 
   interface ViewProps extends NodeProps {
     id?: string;
@@ -110,7 +110,7 @@ declare namespace ReactPDF {
    * The most fundamental component for building a UI and is designed to be
    * nested inside other views and can have 0 to many children.
    */
-  class View extends React.Component<ViewProps> {}
+  class View extends React.Component<React.PropsWithChildren<ViewProps>> {}
 
   interface BaseImageProps extends NodeProps {
     /**
@@ -135,7 +135,7 @@ declare namespace ReactPDF {
    * A React component for displaying network or local (Node only) JPG or
    * PNG images, as well as base64 encoded image strings.
    */
-  class Image extends React.Component<ImageProps> {}
+  class Image extends React.Component<React.PropsWithChildren<ImageProps>> {}
 
   interface TextProps extends NodeProps {
     id?: string;
@@ -188,7 +188,7 @@ declare namespace ReactPDF {
    * A React component for displaying text. Text supports nesting of other
    * Text or Link components to create inline styling.
    */
-  class Text extends React.Component<TextProps | SVGTextProps> {}
+  class Text extends React.Component<React.PropsWithChildren<TextProps> | SVGTextProps> {}
 
   interface LinkProps extends NodeProps {
     /**
@@ -209,13 +209,13 @@ declare namespace ReactPDF {
    * A React component for displaying a hyperlink. Link’s can be nested
    * inside a Text component, or being inside any other valid primitive.
    */
-  class Link extends React.Component<LinkProps> {}
+  class Link extends React.Component<React.PropsWithChildren<LinkProps>> {}
 
   interface NoteProps extends NodeProps {
     children: string;
   }
 
-  class Note extends React.Component<NoteProps> {}
+  class Note extends React.Component<React.PropsWithChildren<NoteProps>> {}
 
   interface CanvasProps extends NodeProps {
     /**
@@ -230,7 +230,7 @@ declare namespace ReactPDF {
     ) => null;
   }
 
-  class Canvas extends React.Component<CanvasProps> {}
+  class Canvas extends React.Component<React.PropsWithChildren<CanvasProps>> {}
 
   interface SVGProps extends NodeProps {
     /**
@@ -247,7 +247,7 @@ declare namespace ReactPDF {
   /**
    * The <SVG /> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents.
    */
-  class Svg extends React.Component<SVGProps> {}
+  class Svg extends React.Component<React.PropsWithChildren<SVGProps>> {}
 
   interface LineProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -260,7 +260,7 @@ declare namespace ReactPDF {
   /**
    * The <Line /> element is used to create a line.
    */
-  class Line extends React.Component<LineProps> {}
+  class Line extends React.Component<React.PropsWithChildren<LineProps>> {}
 
   interface PolylineProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -270,7 +270,7 @@ declare namespace ReactPDF {
   /**
    * The <Polyline /> element is used to create any shape that consists of only straight lines (that is connected at several points).
    */
-  class Polyline extends React.Component<PolylineProps> {}
+  class Polyline extends React.Component<React.PropsWithChildren<PolylineProps>> {}
 
   interface PolygonProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -281,7 +281,7 @@ declare namespace ReactPDF {
    * The <Polygon /> element is used to create a graphic that contains at least three sides.
    * Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
    */
-  class Polygon extends React.Component<PolygonProps> {}
+  class Polygon extends React.Component<React.PropsWithChildren<PolygonProps>> {}
 
   interface PathProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -291,7 +291,7 @@ declare namespace ReactPDF {
   /**
    * The <Path /> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
    */
-  class Path extends React.Component<PathProps> {}
+  class Path extends React.Component<React.PropsWithChildren<PathProps>> {}
 
   interface RectProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -306,7 +306,7 @@ declare namespace ReactPDF {
   /**
    * The <Rect /> element is used to create a rectangle and variations of a rectangle shape.
    */
-  class Rect extends React.Component<RectProps> {}
+  class Rect extends React.Component<React.PropsWithChildren<RectProps>> {}
 
   interface CircleProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -318,7 +318,7 @@ declare namespace ReactPDF {
   /**
    * The <Circle /> element is used to create a circle.
    */
-  class Circle extends React.Component<CircleProps> {}
+  class Circle extends React.Component<React.PropsWithChildren<CircleProps>> {}
 
   interface EllipseProps extends SVGPresentationAttributes {
     style?: SVGPresentationAttributes;
@@ -332,7 +332,7 @@ declare namespace ReactPDF {
    * The <Ellipse /> element is used to create an ellipse.
    * An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
    */
-  class Ellipse extends React.Component<EllipseProps> {}
+  class Ellipse extends React.Component<React.PropsWithChildren<EllipseProps>> {}
 
   interface TspanProps extends SVGPresentationAttributes {
     x?: string | number;
@@ -343,15 +343,15 @@ declare namespace ReactPDF {
    * The <Tspan /> element defines a subtext within a <Text /> element or another <Tspan /> element.
    * It allows for adjustment of the style and/or position of that subtext as needed.
    */
-  class Tspan extends React.Component<TspanProps> {}
+  class Tspan extends React.Component<React.PropsWithChildren<TspanProps>> {}
 
   interface GProps extends SVGPresentationAttributes {}
 
   /**
    * The <G /> SVG element is a container used to group other SVG elements.
    * Transformations applied to the <G /> element are performed on its child elements, and its attributes are inherited by its children.
    */
-  class G extends React.Component<GProps> {}
+  class G extends React.Component<React.PropsWithChildren<GProps>> {}
 
   interface StopProps {
     offset: string | number;
@@ -362,14 +362,14 @@ declare namespace ReactPDF {
   /**
    * The SVG <Stop /> element defines a color and its position to use on a gradient. This element is always a child of a <LinearGradient /> or <RadialGradient /> element
    */
-  class Stop extends React.Component<StopProps> {}
+  class Stop extends React.Component<React.PropsWithChildren<StopProps>> {}
 
   interface DefsProps {}
 
   /**
    * The <Defs /> element is used to store graphical objects that will be used at a later time. Objects created inside a <Defs /> element are not rendered directly. To display them you have to reference them
    */
-  class Defs extends React.Component<DefsProps> {}
+  class Defs extends React.Component<React.PropsWithChildren<DefsProps>> {}
 
   interface ClipPathProps {
     id?: string;
@@ -379,7 +379,7 @@ declare namespace ReactPDF {
    * The <ClipPath /> SVG element defines a clipping path, to be used by the clipPath property.
    * A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
    */
-  class ClipPath extends React.Component<ClipPathProps> {}
+  class ClipPath extends React.Component<React.PropsWithChildren<ClipPathProps>> {}
 
   interface LinearGradientProps {
     id: string;
@@ -392,7 +392,7 @@ declare namespace ReactPDF {
   /**
    * The <LinearGradient /> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
    */
-  class LinearGradient extends React.Component<LinearGradientProps> {}
+  class LinearGradient extends React.Component<React.PropsWithChildren<LinearGradientProps>> {}
 
   interface RadialGradientProps {
     id: string;
@@ -406,7 +406,7 @@ declare namespace ReactPDF {
   /**
    * The <RadialGradient /> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
    */
-  class RadialGradient extends React.Component<RadialGradientProps> {}
+  class RadialGradient extends React.Component<React.PropsWithChildren<RadialGradientProps>> {}
 
   interface BlobProviderParams {
     blob: Blob | null;
@@ -425,7 +425,7 @@ declare namespace ReactPDF {
    * @see https://react-pdf.org/advanced#on-the-fly-rendering
    * @platform web
    */
-  class BlobProvider extends React.Component<BlobProviderProps> {}
+  class BlobProvider extends React.Component<React.PropsWithChildren<BlobProviderProps>> {}
 
   interface PDFViewerProps {
     width?: number | string;
@@ -441,7 +441,7 @@ declare namespace ReactPDF {
    * Iframe PDF viewer for client-side generated documents.
    * @platform web
    */
-  class PDFViewer extends React.Component<PDFViewerProps> {}
+  class PDFViewer extends React.Component<React.PropsWithChildren<PDFViewerProps>> {}
 
   interface PDFDownloadLinkProps {
     document: React.ReactElement<DocumentProps>;
@@ -459,7 +459,7 @@ declare namespace ReactPDF {
    * @see https://react-pdf.org/advanced#on-the-fly-rendering
    * @platform web
    */
-  class PDFDownloadLink extends React.Component<PDFDownloadLinkProps> {}
+  class PDFDownloadLink extends React.Component<React.PropsWithChildren<PDFDownloadLinkProps>> {}
 
   interface UsePDFInstance {
     loading: boolean;