react-simple-show-more - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

es/index.js

@@ -48,3 +48,5 @@ var _class, _temp;
         style = _props.style,
-        ellipsis = _props.ellipsis;
+        ellipsis = _props.ellipsis,
+        showMoreLabel = _props.showMoreLabel,
+        showLessLabel = _props.showLessLabel;
 
@@ -65,3 +67,3 @@ var Tag = this.props.tag;
           },
-          showMore ? ' Show less' : ' Show more'
+          showMore ? showLessLabel : showMoreLabel
         )
@@ -83,4 +85,9 @@ );
   tag: 'span',
-  style: {},
-  ellipsis: '...'
+  style: {
+    cursor: 'pointer',
+    color: '#007bff'
+  },
+  ellipsis: '...',
+  showMoreLabel: ' Show more',
+  showLessLabel: ' Show less'
 }, _temp);
@@ -94,3 +101,5 @@ ShowMore.propTypes = process.env.NODE_ENV !== "production" ? {
   style: PropTypes.object,
-  ellipsis: PropTypes.string
+  ellipsis: PropTypes.string,
+  showMoreLabel: PropTypes.string,
+  showLessLabel: PropTypes.string
 } : {};
@@ -97,0 +106,0 @@

lib/index.js

@@ -59,3 +59,5 @@ 'use strict';
         style = _props.style,
-        ellipsis = _props.ellipsis;
+        ellipsis = _props.ellipsis,
+        showMoreLabel = _props.showMoreLabel,
+        showLessLabel = _props.showLessLabel;
 
@@ -76,3 +78,3 @@ var Tag = this.props.tag;
           },
-          showMore ? ' Show less' : ' Show more'
+          showMore ? showLessLabel : showMoreLabel
         )
@@ -94,4 +96,9 @@ );
   tag: 'span',
-  style: {},
-  ellipsis: '...'
+  style: {
+    cursor: 'pointer',
+    color: '#007bff'
+  },
+  ellipsis: '...',
+  showMoreLabel: ' Show more',
+  showLessLabel: ' Show less'
 }, _temp);
@@ -105,5 +112,7 @@ ShowMore.propTypes = process.env.NODE_ENV !== "production" ? {
   style: _propTypes2.default.object,
-  ellipsis: _propTypes2.default.string
+  ellipsis: _propTypes2.default.string,
+  showMoreLabel: _propTypes2.default.string,
+  showLessLabel: _propTypes2.default.string
 } : {};
 exports.default = ShowMore;
 module.exports = exports['default'];

package.json

 {
   "name": "react-simple-show-more",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Simple Show More Component for React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -46,3 +46,30 @@ # React Simple Show More
         text="Very long text"
+      />
+    );
+  }
+}
+
+```
+
+You can also configure it as your demand:
+```
+import ShowMore from "react-simple-show-more"
+
+class YourComponent extends Component {
+  render() {
+    return (
+      <ShowMore
+        text="Very long text"
         length={170}
+        showMoreLabel=" Expand"
+        showLessLabel=" Collapse"
+        tag="a"
+        className="text-blue"
+        ellipsis="..."
+        style={{
+          cursor: 'pointer',
+          color: 'green',
+          fontWeight: 'bold',
+        }}
+        enabled
       />
@@ -54,3 +81,2 @@ );
 ```
-
 ## Demo
@@ -62,13 +88,21 @@ You can see demo via this [https://elated-curran-7104e4.netlify.com/](https://elated-curran-7104e4.netlify.com/)
 
-| Parameter   | value          | is required |         default         |
-|-------------|----------------|:-----------:|:-----------------------:|
-| text        |    string      |     yes     |                         |
-| length      | string, number |     no      |          170            |
-| tag         |    string      |     no      |          'span'         |
-| className   |    string      |     no      |          ''             |
-| ellipsis    |    string      |     no      |          '...'          |
-| style       |    object      |     no      |          {}             |
-| enabled     |    boolean     |     no      |          true           |
+| Parameter     | value          | is required |         default         |
+|---------------|----------------|:-----------:|:-----------------------:|
+| text          |    string      |     yes     |                         |
+| length        | string, number |     no      |          170            |
+| showMoreLabel |    string      |     no      |       'Show more'       |
+| showLessLabel |    string      |     no      |       'Show less'       |
+| tag           |    string      |     no      |          'span'         |
+| className     |    string      |     no      |          ''             |
+| ellipsis      |    string      |     no      |          '...'          |
+| style         |    object      |     no      |       default Style     |
+| enabled       |    boolean     |     no      |          true           |
+ 
+```
+defaultStyle = {
+  cursor: 'pointer',
+  color: '#007bff',
+}
+```
 
-
 ## Contribution  
@@ -75,0 +109,0 @@ All helps are welcome. Please open a PR and describe what do you want to improve.

No alert changes

Improved metrics

Total package byte prevSize

11225

increased by13.09%

Lines of code

182

increased by10.98%

Number of lines in readme file

110

increased by44.74%

No dependency changes