Fix types for React 18 compat

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# 0.8.2
+
+- Ensures that `React.PropsWithChildren` is used for components that accept children, for React 18 compatibility reasons.
+
+# 0.8.1
+
+- Fixes a bug involving the ESM build.
+
 ## 0.8.0
 
 - Added the [`Transform` component](https://mafs.dev/guides/utility/transform)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mafs",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "license": "MIT",
   "author": "Steven Petryk (https://stevenpetryk.com)",
   "homepage": "https://mafs.dev",

src/display/Text.tsx

@@ -5,17 +5,17 @@ import { useTransformContext } from "./Transform"
 
 export type CardinalDirection = "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw"
 
-export interface TextProps {
+export type TextProps = React.PropsWithChildren<{
   x: number
   y: number
   attach?: CardinalDirection
   attachDistance?: number
   size?: number
   color?: string
   svgTextProps?: React.SVGAttributes<SVGTextElement>
-}
+}>
 
-export const Text: React.FC<TextProps> = ({
+export function Text({
   children,
   x,
   y,
@@ -24,7 +24,7 @@ export const Text: React.FC<TextProps> = ({
   svgTextProps = {},
   attach,
   attachDistance = 0,
-}) => {
+}: TextProps) {
   const { pixelMatrix } = useScaleContext()
   const transformContext = useTransformContext()
 

src/view/MafsView.tsx

@@ -9,7 +9,7 @@ import ScaleContext, { ScaleContextShape } from "./ScaleContext"
 import { round } from "../math"
 import * as vec from "../vec"
 
-export interface MafsViewProps {
+export type MafsViewProps = React.PropsWithChildren<{
   width?: number | "auto"
   height?: number
   /** Whether to enable panning with the mouse and keyboard */
@@ -32,17 +32,17 @@ export interface MafsViewProps {
    * Note that server-side rendering complicated graphs can really bloat your HTML.
    */
   ssr?: boolean
-}
+}>
 
-export const MafsView: React.FC<MafsViewProps> = ({
+export function MafsView({
   width: desiredWidth = "auto",
   height = 500,
   pan = true,
   viewBox = { x: [-3, 3], y: [-3, 3] },
   preserveAspectRatio = "contain",
   children,
   ssr = false,
-}) => {
+}: MafsViewProps) {
   const [visible, setVisible] = React.useState(ssr ? true : false)
   const desiredCssWidth = desiredWidth === "auto" ? "100%" : `${desiredWidth}px`