react-polymorphic-box - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [2.0.5](https://github.com/kripod/react-polymorphic-box/compare/v2.0.4...v2.0.5) (2020-07-17)
+
 ### [2.0.4](https://github.com/kripod/react-polymorphic-box/compare/v2.0.3...v2.0.4) (2020-07-12)
@@ -7,0 +9,0 @@

dist/cjs/bundle.min.cjs.d.ts

@@ -13,4 +13,4 @@ /// <reference types="react" />
 type PolymorphicComponentProps<E extends React.ElementType, P> = P & BoxProps<E>;
-type PolymorphicComponent<P, D extends React.ElementType = "div"> = React.ComponentType<PolymorphicComponentProps<D, P>>;
+type PolymorphicComponent<P, D extends React.ElementType = "div"> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => JSX.Element;
 export { Box, PolymorphicComponentProps, PolymorphicComponent };
 //# sourceMappingURL=bundle.min.cjs.d.ts.map

dist/esm/bundle.min.d.ts

@@ -13,4 +13,4 @@ /// <reference types="react" />
 type PolymorphicComponentProps<E extends React.ElementType, P> = P & BoxProps<E>;
-type PolymorphicComponent<P, D extends React.ElementType = "div"> = React.ComponentType<PolymorphicComponentProps<D, P>>;
+type PolymorphicComponent<P, D extends React.ElementType = "div"> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => JSX.Element;
 export { Box, PolymorphicComponentProps, PolymorphicComponent };
 //# sourceMappingURL=bundle.min.d.ts.map

package.json

 {
 	"name": "react-polymorphic-box",
-	"version": "2.0.4",
+	"version": "2.0.5",
 	"description": "Building blocks for strongly typed polymorphic components in React.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -42,3 +42,2 @@ # react-polymorphic-box
 ```tsx
-import * as React from "react";
 import { Box, PolymorphicComponentProps } from "react-polymorphic-box";
@@ -98,3 +97,2 @@
 ```tsx
-import * as React from "react";
 import { Box } from "react-polymorphic-box";
@@ -104,11 +102,11 @@
   <E extends React.ElementType = typeof defaultElement>(
-    { ref, color, style, ...restProps }: HeadingProps<E>,
-    innerRef: typeof ref
+    { color, style, ...restProps }: HeadingProps<E>,
+    innerRef: typeof restProps.ref
   ) => {
     return (
       <Box
-        ref={innerRef}
         as={defaultElement}
         style={{ color, ...style }}
         {...restProps}
+        ref={innerRef}
       />
@@ -121,1 +119,12 @@ );
 ```
+
+The component can then receive a `ref` prop _([live demo](https://codesandbox.io/s/react-polymorphic-box-forwarding-refs-2l81h)),_ just like a regular HTML element:
+
+```tsx
+import { useRef } from "react";
+
+function App() {
+  const ref = useRef<HTMLHeadingElement>(null);
+  return <Heading ref={ref}>It works!</Heading>;
+}
+```

src/index.ts

@@ -8,5 +8,6 @@ import { BoxProps } from "./Box";
 
-export type PolymorphicComponent<
-	P,
-	D extends React.ElementType = "div"
-> = React.ComponentType<PolymorphicComponentProps<D, P>>;
+export type PolymorphicComponent<P, D extends React.ElementType = "div"> = <
+	E extends React.ElementType = D
+>(
+	props: PolymorphicComponentProps<E, P>,
+) => JSX.Element;

No alert changes

Improved metrics

Total package byte prevSize

17394

3.45%

Lines of code

62

1.64%

Number of lines in readme file

127

7.63%

No dependency changes