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-node/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../dist-src/Box.js"],"sourcesContent":["import React from 'react';\nconst defaultElement = 'div';\nexport const Box = React.forwardRef(({ as, ...restProps }, ref) => {\n    const Element = as || defaultElement;\n    return React.createElement(Element, Object.assign({ ref: ref }, restProps));\n});\n"],"names":["defaultElement","Box","React","forwardRef","ref","as","restProps","Element","createElement","Object","assign"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAMA,cAAc,GAAG,KAAvB;MACaC,GAAG,GAAGC,KAAK,CAACC,UAAN,CAAiB,OAAuBC,GAAvB,KAA+B;AAAA,MAA9B;AAAEC,IAAAA;AAAF,GAA8B;AAAA,MAArBC,SAAqB;;AAC/D,QAAMC,OAAO,GAAGF,EAAE,IAAIL,cAAtB;AACA,SAAOE,KAAK,CAACM,aAAN,CAAoBD,OAApB,EAA6BE,MAAM,CAACC,MAAP,CAAc;AAAEN,IAAAA,GAAG,EAAEA;AAAP,GAAd,EAA4BE,SAA5B,CAA7B,CAAP;AACH,CAHkB;;;;"}
+{"version":3,"file":"index.js","sources":["../dist-src/Box.js"],"sourcesContent":["import React from 'react';\r\nconst defaultElement = 'div';\r\nexport const Box = React.forwardRef(({ as, ...restProps }, ref) => {\r\n    const Element = as || defaultElement;\r\n    return React.createElement(Element, Object.assign({ ref: ref }, restProps));\r\n});\r\n"],"names":["defaultElement","Box","React","forwardRef","ref","as","restProps","Element","createElement","Object","assign"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAMA,cAAc,GAAG,KAAvB;MACaC,GAAG,GAAGC,KAAK,CAACC,UAAN,CAAiB,OAAuBC,GAAvB,KAA+B;AAAA,MAA9B;AAAEC,IAAAA;AAAF,GAA8B;AAAA,MAArBC,SAAqB;;AAC/D,QAAMC,OAAO,GAAGF,EAAE,IAAIL,cAAtB;AACA,SAAOE,KAAK,CAACM,aAAN,CAAoBD,OAApB,EAA6BE,MAAM,CAACC,MAAP,CAAc;AAAEN,IAAAA,GAAG,EAAEA;AAAP,GAAd,EAA4BE,SAA5B,CAA7B,CAAP;AACH,CAHkB;;;;"}

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';

dist-web/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../dist-src/Box.js"],"sourcesContent":["import React from 'react';\nconst defaultElement = 'div';\nexport const Box = React.forwardRef(({ as, ...restProps }, ref) => {\n    const Element = as || defaultElement;\n    return React.createElement(Element, Object.assign({ ref: ref }, restProps));\n});\n"],"names":[],"mappings":";;AACA,MAAM,cAAc,GAAG,KAAK,CAAC;AACjB,MAAC,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAK;AACnE,IAAI,MAAM,OAAO,GAAG,EAAE,IAAI,cAAc,CAAC;AACzC,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;AAChF,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../dist-src/Box.js"],"sourcesContent":["import React from 'react';\r\nconst defaultElement = 'div';\r\nexport const Box = React.forwardRef(({ as, ...restProps }, ref) => {\r\n    const Element = as || defaultElement;\r\n    return React.createElement(Element, Object.assign({ ref: ref }, restProps));\r\n});\r\n"],"names":[],"mappings":";;AACA,MAAM,cAAc,GAAG,KAAK,CAAC;AACjB,MAAC,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAK;AACnE,IAAI,MAAM,OAAO,GAAG,EAAE,IAAI,cAAc,CAAC;AACzC,IAAI,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;AAChF,CAAC;;;;"}

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

12.46%

Dev dependency count

27

-3.57%

Lines of code

73

1.39%

Number of lines in readme file

118

25.53%

No dependency changes