react-universal-interface - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

lib/index.d.ts

@@ -0,3 +1,10 @@
+/// <reference types="react" />
 import render from './render';
 import createEnhancer from './createEnhancer';
+export interface UniversalProps<Data> {
+    children?: ((data: Data) => React.ReactNode) | React.ReactNode;
+    render?: (data: Data) => React.ReactNode;
+    comp?: React.ComponentType<Data & any>;
+    component?: React.ComponentType<Data & any>;
+}
 export { render, createEnhancer, };

package.json

 {
   "name": "react-universal-interface",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Universal Children Definition for React Components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # react-universal-interface
 
+Easily create a component which is render-prop, Function-as-a-child and component-prop.
+
+```js
+import {render} from 'react-univerdal-interface';
+
+class MyData extends React.Component {
+    render () {
+        return render(this.props, this.state);
+    }
+}
+```
+
+Now you can use it:
+
+```jsx
+<MyData render={(state) =>
+    <MyChild {...state} />
+} />
+
+<MyData>{(state) =>
+    <MyChild {...state} />
+}</MyData>
+
+<MyData comp={MyChild} />
+<MyData component={MyChild} />
+```
+
+---
+
 [![][npm-badge]][npm-url] [![][travis-badge]][travis-url] [![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/react-universal-interface)
@@ -114,2 +143,20 @@
 
+## TypeScript
+
+TypeScript users can add typings to their render-prop components.
+
+```ts
+import {UniversalProps} from 'react-universal-interface';
+
+interface Props extends UniversalProps<State> {
+}
+
+interface State {
+}
+
+class MyData extends React.Component<Props, State> {
+}
+```
+
+
 ## License
@@ -116,0 +163,0 @@

src/index.ts

 import render from './render';
 import createEnhancer from './createEnhancer';
 
+export interface UniversalProps<Data> {
+    children?: ((data: Data) => React.ReactNode) | React.ReactNode;
+    render?: (data: Data) => React.ReactNode;
+    comp?: React.ComponentType<Data & any>;
+    component?: React.ComponentType<Data & any>;
+}
+
 export {
@@ -5,0 +12,0 @@ render,

No alert changes

Improved metrics

Total package byte prevSize

29456

increased by4.57%

Lines of code

396

increased by3.39%

Number of lines in readme file

170

increased by38.21%

No dependency changes