react-expand-text 1.0.0 → 2.1.0

package/.babelrc

@@ -1,5 +1,3 @@
 {
-  "plugins": ["transform-react-jsx"],
-  "presets": ["es2015", "stage-2"],
-  "ignore": []
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

package/README.md

@@ -1,44 +1,89 @@
 # react-expand-text
 A simple React component that shrinks and expands long text. If the `text` length is
 longer than `maxLength` the text field will collapse, and truncated text will be replaced
-with an ellipsis. Clicking the text will alternately expand/collapse the long text.
+with an ellipsis. The ellipsis can be placed in the middle (default) or at the end of the text.
+Clicking the text will alternately expand/collapse the long text.
 
 ## Installation
 ```bash
 npm install --save react-expand-text
 ```
 
+## Requirements
+- Node.js >= 18.0.0
+- React >= 18.0.0
+
 ## Usage
 ```javascript
-ExpandText.propTypes = {
-  text: React.PropTypes.string.isRequired,
-  maxLength: React.PropTypes.number.isRequired,
-  className: React.PropTypes.string
+import React from 'react';
+import ExpandText from 'react-expand-text';
+
+const MyComponent = () => {
+  return (
+    <ExpandText
+      text="Your long text here"
+      maxLength={50}
+      className="optional-css-class"
+    />
+  );
 };
 ```
 
 ### Props
-* `text`: Text to display
-* `maxLength`: Max length of text
-* `className`: *Optional* class name to be applied to the inner span
+* `text`: Text to display (string, required)
+* `maxLength`: Max length of text (number, required)
+* `className`: Optional CSS class name to be applied to the span element
+* `truncateAtEnd`: If true, truncates at the end with ellipsis. If false (default), shows beginning and end with ellipsis in the middle (boolean, optional)
+
+## Examples
 
-## Example
+### Middle truncation (default)
+```javascript
+<ExpandText
+  maxLength={30}
+  text="I am a long string that is longer than max length"
+/>
+// Output: "I am a long st...max length" (click to expand)
+```
+
+### End truncation
+```javascript
+<ExpandText
+  maxLength={30}
+  text="I am a long string that is longer than max length"
+  truncateAtEnd
+/>
+// Output: "I am a long string that is lo..." (click to expand)
+```
+
+### Complete example
 ```javascript
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ExpandText from 'react-expand-text';
 
-class App extends React.Component {
-  render() {
-    return (
+const App = () => {
+  return (
+    <div>
+      <h3>Middle truncation (default):</h3>
+      <ExpandText
+        maxLength={30}
+        className='my-css-class'
+        text={'I am a long string that is longer than max length'}
+      />
+
+      <h3>End truncation:</h3>
       <ExpandText
-        maxLength={10}
+        maxLength={30}
         className='my-css-class'
         text={'I am a long string that is longer than max length'}
+        truncateAtEnd
       />
-    );
-  }
-}
+    </div>
+  );
+};
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
 ```

package/example/App.js

@@ -1,19 +1,28 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ExpandText from '../src/expandtext.js';
 
-class App extends React.Component {
-  render() {
-    return (
-        <div>
-            <ExpandText
-                maxLength={10}
-                className='my-css-class'
-                text={'I am a long string that is longer than max length'}
-            />
-        </div>
-    );
-  }
-}
+const App = () => {
+  return (
+    <div>
+      <h3>Middle truncation (default):</h3>
+      <ExpandText
+        maxLength={30}
+        className='my-css-class'
+        text={'I am a long string that is longer than max length'}
+      />
 
-ReactDOM.render(<App />, document.getElementById('root'));
+      <h3>End truncation:</h3>
+      <ExpandText
+        maxLength={30}
+        className='my-css-class'
+        text={'I am a long string that is longer than max length'}
+        truncateAtEnd
+      />
+    </div>
+  );
+};
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-expand-text",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "A simple react component that shrinks and expands long text",
   "main": "index.js",
   "scripts": {
@@ -18,17 +18,22 @@
     "url": "https://github.com/madjemian/react-expand-text/issues"
   },
   "homepage": "https://github.com/madjemian/react-expand-text#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "webpack": "^3.1.0"
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.23.0",
+    "@babel/plugin-transform-react-jsx": "^7.23.0",
+    "babel-loader": "^9.1.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.0"
   }
 }

package/src/expandtext.js

@@ -1,38 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 
-class ExpandText extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            showFull: false
-        };
-    }
+const ExpandText = ({ text, maxLength, className = "", truncateAtEnd = false }) => {
+    const [showFull, setShowFull] = useState(false);
 
-    render() {
-        let visibleText = null;
-        if (this.state.showFull || this.props.text.length <= this.props.maxLength) {
-            visibleText = this.props.text;
+    let visibleText;
+    if (showFull || text.length <= maxLength) {
+        visibleText = text;
+    } else {
+        if (truncateAtEnd) {
+            visibleText = `${text.substring(0, maxLength)}...`;
         } else {
-            const firstHalf = this.props.text.substring(0, this.props.maxLength / 2);
-            const secondHalf = this.props.text.substring(this.props.text.length - (this.props.maxLength / 2), this.props.text.length)
+            const firstHalf = text.substring(0, maxLength / 2);
+            const secondHalf = text.substring(text.length - (maxLength / 2), text.length);
             visibleText = `${firstHalf}...${secondHalf}`;
         }
-        const self = this;
-        const clickHandler = () => {
-            self.setState({showFull: !self.state.showFull});
-        }
-        return <span onClick={clickHandler} className={this.props.className}>{visibleText}</span>;
-  }
-}
+    }
 
-ExpandText.propTypes = {
-  text: React.PropTypes.string.isRequired,
-  maxLength: React.PropTypes.number.isRequired,
-  className: React.PropTypes.string
+    const handleClick = () => {
+        setShowFull(!showFull);
+    };
+
+    return <span onClick={handleClick} className={className}>{visibleText}</span>;
 };
 
-ExpandText.defaultProps = {
-  className: ""
+ExpandText.propTypes = {
+  text: PropTypes.string.isRequired,
+  maxLength: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  truncateAtEnd: PropTypes.bool
 };
 
-export default ExpandText;
+export default ExpandText;

package/webpack-example.config.js

@@ -1,4 +1,4 @@
-var path = require('path');
+const path = require('path');
 
 module.exports = {
     entry: './example/App.js',
@@ -7,14 +7,18 @@ module.exports = {
         path: path.resolve(__dirname, 'example')
     },
     module: {
-        loaders: [
+        rules: [
             {
-                loader: 'babel-loader',
-                exclude: /node_modules/,
-                query: {
-                    presets: ['es2015', 'react']
-                }
+                test: /\.js$/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env', '@babel/preset-react']
+                    }
+                },
+                exclude: /node_modules/
             }
         ]
-    }
+    },
+    mode: 'development'
 };

package/.npmignore

@@ -1,4 +0,0 @@
-node_modules
-example/transpiled.js
-npm-debug.log
-example/bundle.js

package/build/expandtext.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var ExpandText = function (_React$Component) {
-    _inherits(ExpandText, _React$Component);
-
-    function ExpandText(props) {
-        _classCallCheck(this, ExpandText);
-
-        var _this = _possibleConstructorReturn(this, (ExpandText.__proto__ || Object.getPrototypeOf(ExpandText)).call(this, props));
-
-        _this.state = {
-            showFull: false
-        };
-        return _this;
-    }
-
-    _createClass(ExpandText, [{
-        key: "render",
-        value: function render() {
-            var visibleText = null;
-            if (this.state.showFull || this.props.text.length <= this.props.maxLength) {
-                visibleText = this.props.text;
-            } else {
-                var firstHalf = this.props.text.substring(0, this.props.maxLength / 2);
-                var secondHalf = this.props.text.substring(this.props.text.length - this.props.maxLength / 2, this.props.text.length);
-                visibleText = firstHalf + "..." + secondHalf;
-            }
-            var self = this;
-            var clickHandler = function clickHandler() {
-                self.setState({ showFull: !self.state.showFull });
-            };
-            return _react2.default.createElement(
-                "span",
-                { onClick: clickHandler, className: this.props.className },
-                visibleText
-            );
-        }
-    }]);
-
-    return ExpandText;
-}(_react2.default.Component);
-
-ExpandText.propTypes = {
-    text: _react2.default.PropTypes.string.isRequired,
-    maxLength: _react2.default.PropTypes.number.isRequired,
-    className: _react2.default.PropTypes.string
-};
-
-ExpandText.defaultProps = {
-    className: ""
-};
-
-exports.default = ExpandText;