react-polymorphic-box
Advanced tools
Comparing version
@@ -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 @@ |
@@ -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 |
@@ -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 |
{ | ||
"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": [ |
@@ -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>; | ||
} | ||
``` |
@@ -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; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
17394
3.45%62
1.64%127
7.63%