react-expand-text 2.0.0 → 2.1.0

package/README.md

@@ -1,7 +1,8 @@
 # react-expand-text
-A modern React component that shrinks and expands long text. If the `text` length is
+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
@@ -32,8 +33,30 @@ const MyComponent = () => {
 * `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)
 
-## Example
+## Examples
+
+### 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 { createRoot } from 'react-dom/client';
@@ -41,15 +64,26 @@ import ExpandText from 'react-expand-text';
 
 const App = () => {
   return (
-    <ExpandText
-      maxLength={10}
-      className='my-css-class'
-      text={'I am a long string that is longer than max length'}
-    />
+    <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/App.js

@@ -5,11 +5,20 @@ import ExpandText from '../src/expandtext.js';
 const App = () => {
   return (
     <div>
+      <h3>Middle truncation (default):</h3>
       <ExpandText
-        maxLength={10}
+        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>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-expand-text",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A simple react component that shrinks and expands long text",
   "main": "index.js",
   "scripts": {

package/src/expandtext.js

@@ -1,16 +1,20 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-const ExpandText = ({ text, maxLength, className = "" }) => {
+const ExpandText = ({ text, maxLength, className = "", truncateAtEnd = false }) => {
     const [showFull, setShowFull] = useState(false);
 
     let visibleText;
     if (showFull || text.length <= maxLength) {
         visibleText = text;
     } else {
-        const firstHalf = text.substring(0, maxLength / 2);
-        const secondHalf = text.substring(text.length - (maxLength / 2), text.length);
-        visibleText = `${firstHalf}...${secondHalf}`;
+        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 = () => {
@@ -23,7 +27,8 @@ const ExpandText = ({ text, maxLength, className = "" }) => {
 ExpandText.propTypes = {
   text: PropTypes.string.isRequired,
   maxLength: PropTypes.number.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  truncateAtEnd: PropTypes.bool
 };
 
 export default ExpandText;