react-clamp-lines - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

lib/index.d.ts

 import * as React from 'react';
 
-declare module 'react-clamp-lines' {
-    export interface ClampLinesProps {
-        buttons?: boolean;
-        className?: string;
-        debounce?: number;
-        delay?: number;
-        ellipsis?: string;
-        lessText?: string;
-        lines?: number;
-        moreText?: string;
-        text: string;
-    }
+export interface ClampLinesProps {
+  text: string
+  lines?: number
+  ellipsis?: string
+  buttons?: boolean
+  moreText?: string
+  lessText?: string
+  className?: string
+  delay?: number
+  stopPropagation?: boolean
+}
 
-    declare class ClampLines extends React.Component<ClampLinesProps> { }
-    export default ClampLines;
-}
+declare class ClampLines extends React.Component {}
+
+export default ClampLines

lib/index.js

@@ -373,3 +373,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
     _this.end = 0;
+    _this.randomID = Math.random().toString(36).substr(2, 10);
     _this.state = {
+      expanded: true,
       noClamp: false,
@@ -449,2 +451,3 @@ text: '.'
         this.clampLines();
+        this.setState({ expanded: !this.state.expanded });
       }
@@ -516,3 +519,8 @@ }
         'button',
-        { className: 'clamp-lines__button', onClick: this.clickHandler },
+        {
+          className: 'clamp-lines__button',
+          onClick: this.clickHandler,
+          'aria-controls': 'clamped-content-' + this.randomID,
+          'aria-expanded': !this.state.expanded
+        },
         buttonText
@@ -526,2 +534,3 @@ );
 
+
       e.preventDefault();
@@ -534,2 +543,4 @@ stopPropagation && e.stopPropagation();
       });
+
+      this.setState({ expanded: !this.state.expanded });
     }
@@ -551,2 +562,4 @@ }, {
           {
+            id: !this.ssr && 'clamped-content-' + this.randomID,
+            'aria-hidden': !this.ssr && this.state.expanded,
             ref: function ref(e) {
@@ -558,3 +571,3 @@ _this3.element = e;
         ),
-        this.getButton()
+        !this.ssr && this.getButton()
       );
@@ -561,0 +574,0 @@ }

package.json

 {
   "name": "react-clamp-lines",
-  "version": "2.2.0",
-  "description": "Responsive clamping component with Read more/Read less buttons built for React.",
+  "version": "2.3.0",
+  "description": "Responsive and accessible clamping component with Read more/Read less buttons built for React.",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

 # react-clamp-lines
 
-Responsive clamping component with _«Read more»_/_«Read less»_ buttons built for [React](http://facebook.github.io/react/).
+![npm](https://img.shields.io/npm/dm/react-clamp-lines.svg) ![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/react-clamp-lines.svg)
 
+Responsive and accessible clamping component with _«Read more»_/_«Read less»_ buttons built for [React](http://facebook.github.io/react/).
+
 ![react-clamp-lines](react-clamp.png 'react-clamp-lines')
@@ -13,3 +15,3 @@
 
-`npm install --save react-clamp-lines`
+`npm i react-clamp-lines`
 
@@ -23,2 +25,3 @@ ## Features
 - responsive
+- accessible
 - window resize event `debounced` — and [why it's important](https://davidwalsh.name/javascript-debounce-function)
@@ -25,0 +28,0 @@ > If your web app uses JavaScript to accomplish taxing tasks, a **debounce** function is essential to ensuring a given task doesn't fire so often that it bricks browser performance.

src/index.js

@@ -15,3 +15,7 @@ import React, { PureComponent } from 'react';
     this.end = 0;
+    this.randomID = Math.random()
+      .toString(36)
+      .substr(2, 10);
     this.state = {
+      expanded: true,
       noClamp: false,
@@ -30,3 +34,3 @@ text: '.',
     } else {
-      this.state.text = props.text
+      this.state.text = props.text;
     }
@@ -52,3 +56,3 @@ }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate(prevProps) {
     if (prevProps.text !== this.props.text) {
@@ -83,2 +87,3 @@ this.original = this.props.text;
       this.clampLines();
+      this.setState({ expanded: !this.state.expanded });
     }
@@ -145,3 +150,8 @@ }
     return (
-      <button className="clamp-lines__button" onClick={this.clickHandler}>
+      <button
+        className="clamp-lines__button"
+        onClick={this.clickHandler}
+        aria-controls={`clamped-content-${this.randomID}`}
+        aria-expanded={!this.state.expanded}
+      >
         {buttonText}
@@ -154,2 +164,3 @@ </button>
     const { stopPropagation } = this.props;
+
     e.preventDefault();
@@ -164,2 +175,4 @@ stopPropagation && e.stopPropagation();
         });
+
+    this.setState({ expanded: !this.state.expanded });
   }
@@ -175,2 +188,4 @@
         <div
+          id={!this.ssr && `clamped-content-${this.randomID}`}
+          aria-hidden={!this.ssr && this.state.expanded}
           ref={e => {
@@ -182,3 +197,3 @@ this.element = e;
         </div>
-        {this.getButton()}
+        {!this.ssr && this.getButton()}
       </div>
@@ -185,0 +200,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

70615

increased by1.48%

Lines of code

1471

increased by1.59%

Number of lines in readme file

97

increased by3.19%

No dependency changes