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, };

lib/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,4DAA8B;AAI1B,iBAJG,gBAAM,CAIH;AAHV,4EAA8C;AAI1C,yBAJG,wBAAc,CAIH"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,4DAA8B;AAW1B,iBAXG,gBAAM,CAWH;AAVV,4EAA8C;AAW1C,yBAXG,wBAAc,CAWH"}

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,

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29456

4.57%

Lines of code

396

3.39%

Number of lines in readme file

170

38.21%

No dependency changes