zoltantothcom / react-clamp-lines Goto Github PK

View Code? Open in Web Editor NEW

143.0 143.0 36.0 1.18 MB

Responsive clamping component with Read more/Read less buttons built for React.

License: The Unlicense

JavaScript 100.00%

clamp ellipsis react react-clamp react-clamp-lines

react-clamp-lines's Introduction

zoltantothcom

personal portfolio website

react-clamp-lines's People

Contributors

Stargazers

Watchers

react-clamp-lines's Issues

Text is not updating when text prop changes

Problem: when you pass new text to already mounted ClampLines component, text is not updated.

Reason: looking through code, I saw that text prop is assigned to original variable in constructor, which is called only pre-mount, so its updates are untracked.

Possible solutions:

Use getDerivedStateFromProps to update original text, so it is updated on text prop change.
Use props.text directly instead of original variable.

Please unsubscribe from the rsize event in componentDidUnmount

Hello, thanks for the module, turned out to be very useful. Please unsubscribe from the rsize event in componentDidUnmount. Thank!

Empty strings break the component

Such strings are evaluated to false, causing the component to not render.

However, that doesn't stop componentDidMount from firing, and attempt to access its reference to the dom.

Package does not install with React 18

I get the following error when trying to install package:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! dev react@"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15 || ^16" from [email protected]
npm ERR! node_modules/react-clamp-lines
npm ERR! react-clamp-lines@"*" from the root project

Custom read-more buttons?

I would like to pass in my own button components as the read-more button and innerElement. Can this be added?

Accessibility on read more / read less

To be accessible for people using screen readers, it would be nice if the buttons and containers included aria-expanded, aria-controls support.

Not measuring line height again when the window has resived

Many code bases change font size depending on what breakpoints are hit in their application. When clamping text on a window resize you should remeasure the line height of the text as it could have changed.

As an example in our application the font size is smaller on mobile so we end up with a clamp of 3 lines perfectly at desktop, but if I resize my browser to make it smaller then the clamp is 4 lines.

`lines` do not work correctly.

I have set the lines to 3, but it shows 2 lines. The second line is cut in the middle and not at the end of the line.

Prop control over text container element

It would be cool if we could have an "is" attribute or similar so that the inner div could be a P tag instead (or whatever tag we wanted).

aria-hidden="true" even when buttons are hidden

I am trying to understand the reasoning behind why 'aria-hidden' is set to 'true' at all, as screen readers need to read what's inside the clamp regardless of it being truncated or not. If there is a logical reason, then I would like to request an enhancement that when we set 'buttons' attribute to 'false', that 'aria-hidden' is also set to 'false'.

Support customization of overflow element

Hello there,

I am looking for a way to pass in any react element in place of the overflow text. My use case is as follows

Given that a developer is using react-clamp-lines component
The developer should be able to pass int a custom prop `overFlowElement` that allows them to substitute the more / less text with any react element

In my case, I'd like to be able to substitute it with a link that says, "Continue reading .." and it should allow me to link from the text to a different page in my application. I don't believe this feature is currently supported by react-clamp-lines, does anyone have any suggestions for workarounds in the meantime? For reference, shittake has support for this feature and they call it overflowNode.

Thank you

HTML text rendering

Hi there - I need to render text with basic HTML markups (H, b, i, maybe a href) and I wanted to ask what's your perspective of expanding the "text" attribute of CampLines to allow HTML tags?
Sanitizing the HTML - I can take care of this before I use the ClampLine element, don't worry....
Thanks, Boris

Reset `noclamp` state to false when props text changes

When changing the inner text, the noclamp state is not reset to false. This becomes an issue when going from short text (which does not get clamped, i.e. noclamp set to false) to long text (needs clamped). The text is still cut off at the line count, but the ellipses and "Read More" button do not appear.

I believe setting noclamp to false when detecting the text change in componentDidUpdate should do the trick. Alternatively, calling this.action instead of this.clampLines in componentDidUpdate may be preferred.

Server side rendering only displays a period

For server side rendering, only a period is rendered. Can either the full description be rendered or at least part of the description?

ReferenceError: window is not defined in Next.js

Does this library work with Next.js ?
I tested in both Next.js 7 and 8, having the same problem.

add attribute aria-label for accessibility

Can you add aria-label for accessibility ?

Library breaks when rendering node elements

I have a component that helps me format my text on my site for translation. What is returned is a node element that is rendered to the site. Unfortunately, react-clamp-lines break the app I assuming this happens because it is waiting for a string and doesn't know how to handle anything apart from that.

npm package does not work

After npm i --save react-clamp-lines and trying to import it from within a file, I get the following error:

Module not found: Can't resolve 'react-clamp-lines'

package.json sets the entry point to index.js, which doesn't exist. There's a file, namely src/index.js, not yet compiled (so it can't be used from create-react-app.)

typescript definitions do not work with tsc version 3.3.3333

When running tsc the following error occurs
`
node_modules/react-clamp-lines/lib/index.d.ts:16:5 - error TS1038: A 'declare' modifier cannot be used in an already ambient context.

16 declare class ClampLines extends React.Component { }
~~~~~~~

node_modules/react-clamp-lines/lib/index.d.ts:17:5 - error TS2666: Exports and export assignments are not permitted in module augmentations.

17 export default ClampLines;
~~~~~~

Found 2 errors.
The following override works fine for me in my build environment but it may not be the most appropriate fix
import * as React from 'react'

export interface ClampLinesProps {
buttons?: boolean
className?: string
debounce?: number
delay?: number
ellipsis?: string
lessText?: string
lines?: number
moreText?: string
text: string
}

declare class ClampLines extends React.Component {}
export default ClampLines
`

TypeError: null is not an object

I am using react-clamp-lines extensively on one of my sites, and I saw few occurrences of that in the logs (but I can't reproduce it):

TypeError: null is not an object (evaluating 'this.element.innerText=this.original.slice(0,this.middle)')

That matches this line of the project.

Since there is a this.end = this.original.length; few lines before, I can assume the problem is that this.element is null, but I don't how it can happens. A fix would be to check for nullity in that function, but that looks like we would hide the bug rather than fix it.

Do you have any thought about this? I will have a look further when I will have time.

Clamping doesn't work if the ClampLines element is inside a RelativePortal

https://codesandbox.io/embed/clamplines-weirdness-relativeportal-yo87m

Basically, the react-relative-portal package creates a new element at the exact position it would be at normally but the element is moved straight to the body. This causes issues with ClampLines - The lines are shown, but not clamped.

[feature] stopPropagation when clicking on "read more"

It could be nice if we can opt-in to e.stopPropagation for the click events on the "Read More" button.

For example, react-clamp-lines is wrapping a description text for a card. We want to highlight the card when it gets clicked but not when "Read More" gets clicked.

It can be done if we wrap react-clamp-lines with a div and do it there but that means the entire text will stop the Propagation and not only the "Read More" button.

The change probably will be in this block, something along this:

  clickHandler(e) {
    const { stopPropagation } = this.props;
    e.preventDefault();
    stopPropagation && e.stopPropagation();

    this.watch = !this.watch;
    this.watch
      ? this.clampLines()
      : this.setState({
          text: this.original,
        });
  }

Test component with react testing-library

Hi,
I'm trying to test the component with the react testing-library. The test is quite simple but for some reason when I run it the testid cannot be found. The error returned is TestingLibraryElementError: Unable to find an element by: [data-testid="clamped-text"] and the test example is as follow:

const longText = "...";

it("should clamp text", () => {
  render(<ClampLines {...props} data-testid="clamped-text" />);

  const containerDiv = screen.getByTestId("clamped-text");
  expect(containerDiv).toBeInTheDocument();
});

When I go to analyse the elements in the browser, the element with that testid actually does not exist. Any help?

clamping doesnt respect newlines

STR:

Add text with newlines, eg:

const text = '1\n 1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n  1\n '
<ClampLines
          className={this.state.cssClasses}
          text={this.text}
        />

Note that all the lines are collapsed into one line
Then add a CSS of white-space: pre-wrap
Note that newlines are preserved but no truncation occurs

Typings / typescript

Here there - I am trying to use it in a typescript environment and get an error on the "text" attribute (
<ClampLines
text="whatever"
....

I guess it's missing typings (and I am new to this stuff) - any chance to quick fix this? Thank you!! Cheers, Boris

"No overload matches this call.
Overload 1 of 2, '(props: Readonly): ClampLines', gave the following error.
Type 'EditableValue' is not assignable to type 'string'.
Overload 2 of 2, '(props: ClampLinesProps, context?: any): ClampLines', gave the following error.
Type 'EditableValue' is not assignable to type 'string'.ts(2769)
index.d.ts(4, 3): The expected type comes from property 'text' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'
index.d.ts(4, 3): The expected type comes from property 'text' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'

Uncaught TypeError: Cannot set property 'innerText' of null

Sometimes I get this error http://joxi.ru/1A5JL8ZhDGZyBr, but cannot reproduce it properly. Error occurs here https://github.com/zoltantothcom/react-clamp-lines/blob/master/src/index.js#L203.
Any idea on this?

Lines not working properly with React 18

The demo is working fine but is using React 16.
My app is using React 18 and most of the features are working except the "lines" property.

I tried copying the existing demo code into a new stackblitz using React 18

https://stackblitz.com/edit/stackblitz-starters-suzkrx?description=React%20%20%20TypeScript%20starter%20project&file=src%2FApp.tsx,src%2Fstyle.css&title=React%20Starter

Bold on hover effect breaks past lines value.

I have a bold hover effect on the text that is being clamped. Hovering this makes the text go past the specified lines prop.
Is there a solution for this?

Normal:

Hovered: