react-html-props - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

		{
		"name": "react-html-props",
		"version": "1.0.6",
		"version": "1.0.7",
		"author": "Justin Mahar <contact@justinmahar.com>",
		@@ -5,0 +5,0 @@ "description": "Convenience TypeScript type definitions for all HTML element props.",

README.md

		@@ -68,5 +68,5 @@ <h2 align="center">

		So you can use TypeScript's [intersection types](https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types) notation to combine your own props with the HTML element's props.
		In this case, simply extend the props for the element you'd like. For instance, `MyComponent extends DivProps`.

		Then use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to unpack your own props out of the resulting combined type.
		Then use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to unpack your desired props.

		@@ -76,16 +76,10 @@ Just follow the example below:
		```tsx
		import { DivProps } from 'react-html-props';

		interface PandaBearComponentProps {
		pandaBearCount: 10;
		interface KindleOfKittensProps extends DivProps {
		kittenCount: 10;
		}

		export const PandaBearComponent = ({
		children,
		pandaBearCount,
		...divProps
		}: PandaBearComponentProps & DivProps): JSX.Element => {
		export const KindleOfKittens = ({ children, kittenCount, ...divProps }: KindleOfKittensProps): JSX.Element => {
		return (
		<div {...divProps}>
		<h1>I have {pandaBearCount} panda bears</h1>
		<h1>I have a kindle of {kittenCount} kittens</h1>
		<div>{children}</div>
		@@ -97,2 +91,4 @@ </div>

		(Yes, a group of kittens is called a "kindle")

		## Included HTML Element Props
		@@ -99,0 +95,0 @@

New alerts