react-polymorphic-box - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [1.1.0](https://github.com/kripod/react-polymorphic-box/compare/v1.0.4...v1.1.0) (2020-04-09)
+
+### Features
+
+- `PolymorphicComponent` type ([81cbb91](https://github.com/kripod/react-polymorphic-box/commit/81cbb91bcac54a8321582074069f365ac1ff3312))
+
 ### [1.0.4](https://github.com/kripod/react-polymorphic-box/compare/v1.0.3...v1.0.4) (2020-02-15)
@@ -7,0 +13,0 @@

dist-src/Box.js

@@ -0,0 +0,0 @@ import React from 'react';

dist-src/index.js

 export { Box } from './Box';

dist-types/Box.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

dist-types/index.d.ts

@@ -5,1 +5,2 @@ /// <reference types="react" />
 export declare type PolymorphicComponentProps<E extends React.ElementType, P> = P & BoxProps<E>;
+export declare type PolymorphicComponent<P, D extends React.ElementType = 'div'> = <E extends React.ElementType = D>(props: PolymorphicComponentProps<E, P>) => JSX.Element;

dist-types/utils.d.ts

 /// <reference types="react" />
 export declare type PropsOf<E extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<E, React.ComponentPropsWithRef<E>>;

dist-web/index.js

@@ -0,0 +0,0 @@ import React from 'react';

package.json

 {
   "name": "react-polymorphic-box",
   "description": "Building blocks for strongly typed polymorphic components in React.",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "license": "MIT",
@@ -30,3 +30,2 @@ "files": [
     "@commitlint/config-conventional": "^8.3.4",
-    "@commitlint/prompt": "^8.3.5",
     "@pika/pack": "^0.5.0",
@@ -36,23 +35,23 @@ "@pika/plugin-build-node": "^0.9.2",
     "@pika/plugin-ts-standard-pkg": "^0.9.2",
-    "@types/react": "^16.9.19",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
-    "commitizen": "^4.0.3",
+    "@types/react": "^16.9.34",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "commitizen": "^4.0.4",
+    "cz-conventional-changelog": "^3.1.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb-typescript": "^7.0.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-config-airbnb-typescript": "^7.2.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "eslint-plugin-simple-import-sort": "^5.0.1",
-    "husky": "^4.2.1",
-    "lint-staged": "^10.0.2",
-    "prettier": "^1.19.1",
-    "prettier-plugin-packagejson": "^2.0.10",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-simple-import-sort": "^5.0.2",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.1.3",
+    "prettier": "^2.0.4",
+    "prettier-plugin-packagejson": "^2.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "standard-version": "^7.1.0",
-    "typescript": "^3.8.1-rc"
+    "typescript": "^3.8.3"
   },
@@ -59,0 +58,0 @@ "source": "dist-src/index.js",

README.md

@@ -68,2 +68,26 @@ # react-polymorphic-box
 
+### Typing external components
+
+Alternatively, you can also type your custom components by using the `PolymorphicComponent` type. This is especially handy when working with external libraries that already expose polymorphic components. Here's an example implementing the Heading component from above using [styled-components](https://styled-components.com):
+
+```tsx
+import { PolymorphicComponent } from 'react-polymorphic-box';
+import styled from 'styled-components';
+
+// Component-specific props
+interface HeadingProps {
+  color?: string;
+}
+
+// An HTML tag or a different React component can be rendered by default
+const defaultElement = 'h2';
+
+const Heading: PolymorphicComponent<
+  HeadingProps, // Merged with props from the underlying element type
+  typeof defaultElement // Default element type (optional, defaults to 'div')
+> = styled(defaultElement)<HeadingProps>`
+  color: ${(props) => props.color};
+`;
+```
+
 ### Forwarding Refs
@@ -70,0 +94,0 @@

No alert changes

Improved metrics

Total package byte prevSize

12763

increased by12.46%

Dev dependency count

27

decreased by-3.57%

Lines of code

73

increased by1.39%

Number of lines in readme file

118

increased by25.53%

No dependency changes