Comments (3)
<Truncate>
{Array(300).fill('word ').map((content, i) => (
<span key={i}>{content}</span>
))}
</Truncate>
works fine for me.
Could you provide some additional info:
- Which version of
react-truncate
are you using? - How is your
map
function defined (Array.prototype.map
?) - What does
get(event, "attachments")
return? - What kind of DOM element does
<Attachment>
return?
For that matter, could you do
console.log(
map((x, i) => (
<Attachment
featuresFormatted={get(event, "featuresFormatted")}
index={i}
key={get(x, "uri")}
attachment={x}
highlightedAttachmentNames={highlightedAttachmentNames}
/>
), get(event, "attachments"))
);
and paste the output here?
from react-truncate.
@pablosichert well i'm silly. this is my own problem. i looked at the source code and took notice that it is genuinely just for text nodes. i'm making an attempt to map over a component that returns html.
thanks for the thorough response.
to follow-up, what do you think the likelihood is of having the ability to truncate components wholely vs text nodes. is it worth a PR? in my case, i've got n number of <Attachment />
components in an array; each <Attachment />
returns something like <div><i class="icon"> text</div>
, and i want to truncate down to only display x number of <Attachment />
components. maybe a different project? or could you anticipate this project having the ability to additionally be inclusive of React elements?
from react-truncate.
No worries :-)
There has been a similar feature request #8.
I had some ideas on how to implement a solution that works for any node, but don't have an overall plan yet. Also, can't promise any schedule for this feature until we need it in production.
Closing this for now.
As a solution for your use case, wouldn't something like this work?
let attachments = [];
let _attachments = get(event, "attachments");
let numAttachments = showAll ? _attachments.length : Math.min(_attachments.length, 3);
for (let i = 0; i < numAttachments; i++) {
let attachment = attachments[i];
attachments.push(
<Attachment
featuresFormatted={get(event, "featuresFormatted")}
index={i}
key={get(attachment, "uri")}
attachment={attachment}
highlightedAttachmentNames={highlightedAttachmentNames}
/>
);
}
return (
<div>{attachments}</div>
);
And some button in your UI that toggles the showAll
variable.
from react-truncate.
Related Issues (20)
- <br> tags being added to truncated lines HOT 8
- 3rd party device recognition is blocking usage
- Maintenance status? HOT 2
- ellipsis still display when text isn't too long HOT 1
- ComponentWillUnmount ellipsis removal fails in test suites and other situations HOT 5
- Cannot set property 'font' of undefined HOT 3
- In jest tests - the ellipsis always show, regardless of whether it truncates. HOT 1
- Ellipsis not shown when text is only one word
- Truncate get error on 'width' prop when my app still work in another tab like keep-alive component
- Wrong lines calculation when width specified and having responsive container HOT 3
- React v17 support HOT 2
- Last line length changes when parent component set to display none
- Jest: Can not test onTruncate method HOT 3
- Update to React 17 HOT 5
- deleted
- wrong width of span on load HOT 2
- New release HOT 1
- React 18 support HOT 1
- Can't add as dependency in React 18 HOT 10
- Wrong line breaks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-truncate.