react-expand-text 2.1.0 → 2.2.0

package/README.md

@@ -4,6 +4,8 @@ longer than `maxLength` the text field will collapse, and truncated text will be
 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.
 
+**Now with full TypeScript support!** 🚀
+
 ## Installation
 ```bash
 npm install --save react-expand-text
@@ -14,6 +16,24 @@ npm install --save react-expand-text
 - React >= 18.0.0
 
 ## Usage
+
+### TypeScript
+```tsx
+import React from 'react';
+import ExpandText from 'react-expand-text';
+
+const MyComponent: React.FC = () => {
+  return (
+    <ExpandText
+      text="Your long text here"
+      maxLength={50}
+      className="optional-css-class"
+    />
+  );
+};
+```
+
+### JavaScript
 ```javascript
 import React from 'react';
 import ExpandText from 'react-expand-text';

package/build/expandtext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ExpandTextProps {
+    text: string;
+    maxLength: number;
+    className?: string;
+    truncateAtEnd?: boolean;
+}
+declare const ExpandText: React.FC<ExpandTextProps>;
+export default ExpandText;

package/build/expandtext.js

@@ -0,0 +1,47 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ExpandText = function ExpandText(_ref) {
+  var text = _ref.text,
+    maxLength = _ref.maxLength,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$truncateAtEnd = _ref.truncateAtEnd,
+    truncateAtEnd = _ref$truncateAtEnd === void 0 ? false : _ref$truncateAtEnd;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showFull = _useState2[0],
+    setShowFull = _useState2[1];
+  var visibleText;
+  if (showFull || text.length <= maxLength) {
+    visibleText = text;
+  } else {
+    if (truncateAtEnd) {
+      visibleText = "".concat(text.substring(0, maxLength), "...");
+    } else {
+      var firstHalf = text.substring(0, maxLength / 2);
+      var secondHalf = text.substring(text.length - maxLength / 2, text.length);
+      visibleText = "".concat(firstHalf, "...").concat(secondHalf);
+    }
+  }
+  var handleClick = function handleClick() {
+    setShowFull(!showFull);
+  };
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    onClick: handleClick,
+    className: className
+  }, visibleText);
+};
+var _default = exports["default"] = ExpandText;

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "react-expand-text",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A simple react component that shrinks and expands long text",
   "main": "index.js",
+  "types": "build/expandtext.d.ts",
+  "files": [
+    "build",
+    "index.js",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "example": "webpack --config webpack-example.config.js && open example/index.html",
-    "build": "babel src --out-dir build"
+    "example": "npm run build && webpack --config webpack-example.config.js && open example/index.html",
+    "build": "babel src --out-dir build --extensions \".ts,.tsx,.js,.jsx\" && tsc --emitDeclarationOnly"
   },
   "repository": {
     "type": "git",
@@ -22,17 +29,21 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "prop-types": "^15.8.1"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
     "@babel/core": "^7.23.0",
+    "@babel/plugin-transform-react-jsx": "^7.23.0",
     "@babel/preset-env": "^7.23.0",
     "@babel/preset-react": "^7.23.0",
-    "@babel/plugin-transform-react-jsx": "^7.23.0",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
     "babel-loader": "^9.1.0",
+    "typescript": "^5.9.3",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.0"
   }

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/example/App.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import ExpandText from '../src/expandtext.js';
-
-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={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/example/index.html

@@ -1,8 +0,0 @@
-<html>
-<head>
-</head>
-<body>
-    <div id="root"></div>
-    <script src="bundle.js"></script>
-</body>
-</html>

package/src/expandtext.js

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

package/webpack-example.config.js

@@ -1,24 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    entry: './example/App.js',
-    output: {
-        filename: 'bundle.js',
-        path: path.resolve(__dirname, 'example')
-    },
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: ['@babel/preset-env', '@babel/preset-react']
-                    }
-                },
-                exclude: /node_modules/
-            }
-        ]
-    },
-    mode: 'development'
-};