react-detectable-overflow - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/DetectableOverflow.d.ts

 /// <reference types="react" />
 import * as React from 'react';
 export interface Props {
-    value: string;
     tag?: string;
@@ -6,0 +5,0 @@ style?: object;

dist/DetectableOverflow.js

@@ -62,3 +62,3 @@ "use strict";
         };
-        return React.createElement(tag, props, React.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: this.updateState }), this.props.value);
+        return React.createElement(tag, props, React.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: this.updateState }), this.props.children);
     };
@@ -65,0 +65,0 @@ return DetectableOverflow;

package.json

 {
   "name": "react-detectable-overflow",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React component that informs when the overflowed status is changed.",
@@ -5,0 +5,0 @@ "author": {

README.md

 # React Detectable Overflow
 
+[![Circle Status](https://circleci.com/gh/h-kanazawa/react-detectable-overflow.svg?style=shield&circle-token=bdff2eda82abf6802195c4c9935852b1f276745f)](https://circleci.com/gh/h-kanazawa/react-detectable-overflow)
+[![npm version](https://badge.fury.io/js/react-detectable-overflow.svg)](https://badge.fury.io/js/react-detectable-overflow)
+
 A React component which is able to detect changes in the state that the contents is overflowed.
@@ -21,3 +24,2 @@
 |:--|:--|:--|:--|:--|
-|value|true|string|||
 |tag||string|element type (e.g. `'p'`, `'div'`)|'div'|
@@ -47,6 +49,5 @@ |style||object|css style of the element|{<br>width: '100%',<br>textOverflow: 'ellipsis',<br>whiteSpace: 'nowrap',<br>overflow: 'hidden',<br>}|
     return (
-      <DetectableOverflow
-        value="This is a sample text."
-        onChange={this.handleChange}
-        />
+      <DetectableOverflow onChange={this.handleChange}>
+        This is a sample text.
+      </DetectableOverflow>
     );
@@ -59,3 +60,3 @@ }
 
-Be careful when you change the length of `value` by onChange callback. The following code perhaps causes the infinite loop of changing `isOverflowed` state.
+Be careful when you change the length of `children` contents by onChange callback. The following code perhaps causes the infinite loop of changing `isOverflowed` state.
 
@@ -65,3 +66,2 @@ ```jsx
 <DetectableOverflow
-  value={this.state.value}
   onChange={(isOverflowed) => {
@@ -74,3 +74,5 @@ if (isOverflowed) {
   }}
-  />
+  >
+  {this.state.value}
+</DetectableOverflow>
 ```
@@ -77,0 +79,0 @@

No alert changes

Improved metrics

Total package byte prevSize

150836

1107.94%

Number of package files

15

15.38%

Number of lines in readme file

78

2.63%

Worsened metrics

Lines of code

189

-1.05%

No dependency changes