bsidelinger912 / shiitake Goto Github PK
View Code? Open in Web Editor NEWReact Line clamp that won't get you fired
License: MIT License
React Line clamp that won't get you fired
License: MIT License
Well done on ie.
But in mozilla. I write lines={2}. The result is one line.
In chrome, when line-height is difference then font-size, i saw only half part of text.
Also some times all looks good after resize.
I'm using storybook's storyshots addon to run jest snapshot tests in my app.
I have an issue with refs during my test runtime, it's definitely related to: https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing
shiitake/dist/index.js:91 -> testChildrenEl ref is null
var contentHeight = testChildrenEl.current.offsetHeight;
Stack trace:
TypeError: Cannot read property 'offsetHeight' of null
at checkHeight (node_modules/shiitake/dist/index.js:91:48)
at node_modules/shiitake/dist/index.js:152:7
at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10345:26)
at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10383:11)
at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9972:14)
shiitake version: 3.0.2
Could you help with creating node mock for this case?
Given the following:
const text = null;
<Shiitake lines={2}>{text}</Shiitake>
Throws the following error:
Uncaught (in promise) TypeError: Cannot read property 'length' of null
at Shiitake.render (bundle-program-builder.js?compile=false:76149)
Sometimes text
comes from an API as null. There is a workaround:
const text = null;
<Shiitake lines={2}>{text ? text : ''}</Shiitake>
But I'd rather have the Shiitake component handle this for me instead.
Also, I noticed there is no unit test in shiitake.spec.js for this particular case. I would have sent a pull request, but I could not run any tests on my local machine. Maybe you could add some info in README.md about how to run tests and what dev dependencies are needed for this.
Does the repo support HTML content type?
export interface ShiitakeProps { lines: number, throttleRate?: number, className?: string, tagName?: string, overflowNode?: React.ReactNode, onTruncationChange?: (isTruncated: boolean) => void, **attributes: WhitelistedElementAttributes,** }
{text}
needs to be a string and linebreaks are not interpreted. Adding html elements breaks shittake.
componentWillReceiveProps
and the other will
lifecycle events are deprecated, and support will be removed soon. Please either remove the need for these events, or switch to the UNSAFE_
versions.
Thanks!
First of all, let me thank you for the great component (you saved me a lot of time).
I was wondering if there's a supported way to determine if shiitake truncated it's children or not. (without messing around with the DOM)
I tried taking a ref and looking at the state. found allChildren, testChildren but it didn't help much.
For example, I would like to add the "title" property
We are using v3.0.1 within a react app. When we have a state change with this version, the value in which is wrapped in the Shiitake component does not update without a resize event. Therefore, when the UI needs to change, it holds onto the old value and just appends a ... instead of re-rendering the component to determine if the new value needs to be truncated or not.
The value appears to be appended to the DOM but the original value does not update. This is not an issue in v2.3.1
Work around is to add a key={stateValue}
to trigger a re-render of the component so when the value in the state changes, the component will adjust
We're using shiitake to display a show more/show less button. However this button shows regardless of whether something has been truncated.
Is there a way using react refs to access the original text and the new truncated text to compare length and determine if the show more button should be displayed or not?
<Fragment>
{!displayFullNote && (
<Shiitake id="truncated" className="d-block text-midgrey font-14" lines={1}>
{text}
</Shiitake>
)}
{displayFullNote && (
<small id="non-truncated" className="d-block text-midgrey">{text}</small>
)}
<small
id="display-fullnote"
className="cursor-pointer border-0 text-primary bg-none d-block"
onClick={() =>
this.setState({
displayFullNote: !displayFullNote
})
}
>
{displayFullNote ? "Show less" : "Show more"}
</small>
</Fragment>
Does this package support ^17.0.0
without any work? Or, what is the outline for support?
Hi! Great component!
We may be having a problem where this ResizeListener fires when CSS Media breakpoints are fired off... essentially, any resize event will fire an event, which your component processes
Is is possible for you to check with shouldComponentUpdate or use a PureComponent to see if a rerender is actually required? It is rerendering even though all the props are the same coming in
I can create a minimal example if you want, we discovered this with why-did-you-update
Thanks!
~ B
If you lazy-load a component including a Shiitake
, the content sometimes doesn't render. This isn't your fault; it's due to a design flaw in React that the developers have said they aren't going to fix. Here's why it happens:
display: none
on the topmost element. While this is happening, the Suspense
fallback is being displayed.display: none
, the measured height is zero.Suspense
fallback, and removes display: none
. This action is not linked to the React lifecycle, and doesn't fire any sort of event, so there's no way to detect that this is happening.Shiitake
rerender by resizing the window or something, the content is rendered inside a height: 0
element, which makes it invisible to the user.In my project, I worked around the issue by creating a wrapper component around Shiitake
which goes up the DOM tree looking for display: none
, and polling for that style's removal. It's very hacky, but it works.
If you fix this, you'll have the only popular line-clamping component which can safely be lazy-loaded. I checked the others. :) If you like, I can ask my boss whether my workaround can be open sourced so you can use it as a dependency.
First of all, thanks for putting this library out for others to use. It's really helpful 👍
I can see that there is 1.3.0 version of this package available on npm:
However, I cannot see which commit that is pointing to. This is the latest commit I can find but it's for 1.2.0: d870278
As a general feedback, it would be nice to tag the releases.
Reproduction steps:
const text = 'Cook it up all night with Shitakes';
with this one const text = 'Proposal_for_a_Directive_COM_2016_450_final_of_7-May-2016_Money_No_Money_-short.pdf';
I would like to manage the component rerender myself. This is necessary when resizing the parent component.
Hi! Please redirect me if this issue has already been addressed somewhere, I could not find it. Also please tell me if this is lacking information you need.
As far as i can tell Shiitake will remove special characters, including all characters following it. From what i can gather, special characters that have a char-length of 2 or more are removed, along with everything after. At least those I have tested.
The following test-string
Cool! 😀 .😀 This is super cool( ͡° ͜ʖ ͡°) yo (•⚗ ৺⚗•) ᕕ ༼⌐■-■༽ᕗ ?????????
will only render
Cool!
(with the final empty-space)
when used with Shiitake.
The behaviour repeats itself with later special characters, like Lennyface ( ͡° ͜ʖ ͡°)
, bulletpoint •
, and so on. Just to be clear on this, if I remove all the special characters, everything is rendered. I have also tested other strings and emoticons. Æ, Ø and Å - three Norwegian letters, are rendered.
I'm not sure, but I think the issue might relate to the length of each of the special characters and how length is handled. All the emoticons have a char-length of 2 or more, while Æ,Ø and Å, for instance, have a char length of 1.
"😀".length === 2 // true
"Æ".length === 1 // true
I haven't found time to check your src and see if i can find a solution.
I just ran into this today, will fix ASAP.
Can you please update to support the breaking change coming in v16?
Hey there, it would be really helpful for accessibility reasons that the hidden elements (like the Ws and repeated spans) to have an aria-hidden
tag on them. Otherwise screen readers read the text, the W's and the text over again, making it very confusing to someone who needs to consume the content by listening.
I can help by making a PR, I can easily see where the W's get added so that one is easy. With your help I'm sure this is a small change.
Hi @bsidelinger912 I would like to be able to set the lines dynamically, depending on state. But can't seem to get this to work. It only registers the change when the window is resized. Example: http://codepen.io/mangakid/pen/LxmdjR
Would the truncation work? Thanks!
npm WARN [email protected] requires a peer of react@^15.5.4 but none is installed. You must install peer dependencies yourself.
hi i just wondering if you can add a className for the span children that you create for clamp...
thanks!
Is there a way to replace the "..." text with "read more"?
This module works really well, but I'm noticing a slight lag before the clamped content appears, illustrated below:
I have 10 items per page that are getting clamped. Could that be contributing to the issue?
Also, I have the throttleRate
set to 100
, but not sure if that affects the initial load.
What can be done to speed it up, or maybe even display the content (and hiding overflow via CSS) before clamping?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.