Develop Reference

How can i get my bootstrap 5 card-body in one line so I can horizontally scroll?

I'm currenty creating cards with bootstrap 5. I was successfully able to get an image on top, and card body rendering right underneath it. Some of my card title's were longer than others, and I wanted all my card's body to be the same height. I added class 'text-truncate' and was able to truncate long strings of text with ellipsis. I wanted to add a horizontal scroll so that I can just scroll through the long strings rather than have ellipsis on it.
This is my current code for my cards
<div className="row p-5 m-2">
{userShows.map((userShow) => {
return (
<div className="col-sm " key={userShow.show.id}>
<div className="card" style={{ width: 17 + "rem" }}>
<img
src={userShow.show.images[1].url}
alt="podcastimg"
className="card-img-top"
/>
<div className="card-body ">
<h5
style={{ textAlign: "center" }}
className="card-title text-truncate overflow-scroll"
>
<Link
to={`/show/${userShow.show.id}`}
className="stretched-link"
>
<span style={{ fontWeight: "bold", color: "white" }}>
{userShow.show.name}
</span>
</Link>
</h5>
<span className="card-text">
<h6
style={{
textAlign: "center",
fontSize: "14px",
fontWeight: 400,
color: "white",
}}
>
{" "}
{userShow.show.publisher}
</h6>
</span>
</div>
</div>
</div>
);
})}
</div>
When I add both classes 'text-truncate' and 'overflow-scroll' this is how my cards look:
I'm able to scroll, but the full text isn't there.
When I delete class 'text-trucate', the horizontal scroll obviously does not work since the full card-text is being rendered:
I was unable to find any docs on how to make my card body (card-title and card-text) in one line where I can horizontally scroll instead of using class 'text-trucate'
Does anyone know how I can achieve this? Any tips will be greatly appreciated, thanks in advance!

How can I position button dynamatically according to page components?

In React application I am displaying list of images. When individual book is removed Hide Books button takes the place to that component.
What I am trying to achieve is Hide Books button should remain at the same position and should dynamatically change its position on y axis if whole row of books is deleted
Initial state of application
When individual book is removed -
app.js
return(
<div style={{ position: "relative", minHeight: "100vh" }}>
<button
style={{
position: "absolute",
bottom: "",
}}
onClick={clearBooks}
>
Hide Books
</button>
</div>
)

could you share more of your code? maybe have a codesandox example? It seems to be a styling issue but it's hard to tell without more code.
-edit-
your button should be separated from your list of books, this is the reason why it essentially "follows" your last book card.
Try to do something like this
return (
<section className='wrapper'>
<div className='bookList'>
{booksData.map(book => {
//code your books here
}
</div>
//then put your button out of the div
<button onClick={function}>hide books</button>
</section>
)
your CSS for the wrapper div could be something like this
.wrapper{
display: flex;
flex-direction: column
}
this way you'll have the books first then the button will be displayed below the list

Place the button as the next sibling to the section of Books. Shown in the following. All I did was to move the button out of the section. You will have to style the button with padding and such for the updated layout.
// in index.js, BookList
return (
<>
<section className="booklist">
{booksData.map((book, index) => {
return (
<Book
key={index}
{...book}
removeIndividualBook={removeIndividualBook}
></Book>
);
})}
</section>
{booksData.length === 0 ? (
<button onClick={handleShowBook}>Show Books</button>
) : (
<div style={{ position: "relative", minHeight: "100vh" }}>
<button
style={{
// position: "absolute",
// marginTop: "2350px",
// marginLeft: "28px",
position: "absolute",
//left: "12%",
bottom: "",
}}
onClick={clearBooks}
>
Hide Books
</button>
</div>
)}
</>
);

How to implement react-particles-js with anchor links?

Using react-particles-js
as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation
const App = () => {
return (
<div className="App" style={{ position: "relative", overflow: "hidden" }}>
<div style={{ position: "absolute" }}>
<Particles height="330vh" width="100vw" params={particlesConfig} />
</div>
<Home /> {/*this is the content */}
</div>
);
};
What it happens its that in this component with link like this
<a
href="https://tienda-de-garage.herokuapp.com/"
style={{ textDecoration: "none", color: "black" }}
>
<p>Tienda de Garage</p>
</a>
Don't work.
I wonder if its the implementation, maybe the use of the view port the increase the size of the area to encompass the background but i'm not sure.
here its a live version, with the 1 link not working to show the issue

You need to set interactivity.detectsOn to window (InteractivityDetect.window or "window")
You can see a working sample here
This sample uses react-tsparticles but it's the same as react-particles-js since they share the same core library tsparticles

Conditional Statements with the #artsy/fresnel Framework

I'm using the #artsy/fresnel npm package to build a responsive React application.
Here's my code
<Media greaterThanOrEqual='computer'>
<div style={{ padding: '20px 50px' }}>
Some Content Goes Here
</div>
</Media>
<Media lessThan='computer'>
<div style={{ padding: '50px 100px' }}>
Exact Same Content Goes Here
</div>
</Media>
I've searched through the documentation, but could not find a way to set the padding of my div depending on the Media tag rendered. I want to achieve something like this
<div style={{ padding: (MediaIsGreaterThanComputer ? '20px 50px' : '50px 100px') }}>
Some Content Goes Here
</div>
Is this doable with the #artsy/fresnel framework?

You can do this, but you’ll need to take control over the wrapper div that gets emitted by the Media component (see the note about “render-props”). So something like:
<Media greaterThanOrEqual='computer'>
{(mediaClassNames, renderChildren) => {
return (
<div style={{ padding: '20px 50px' }}>
{renderChildren ? "Some Content Goes Here" : null}
</div>
)
}}
</Media>

Render text with HTML tags in page [duplicate]

This question already has answers here:
How to render HTML string as real HTML?
(13 answers)
Closed 3 years ago.
I have this data:
{
"text":"<h1>hello</h1><p style={{backgroundColor:blue}}>Paragraph text</p>",
"type":"bold"
},
But when I show it in my page, it shows up with the tags h1 and p and style. How can I print this variable, and have the tags work as well?
This is my js:
<div key={index}>
{descriere.type === "bold" ? (
<p style={{ color: "red" }}>
{data.text}
</p>
) : (
<p style={{ color: "purple" }}>
{data.text}
</p>
)}
</div>
I also tried printing it inside a div tag and the same issue.
Any thoughts?

you can use the dangerouslySetInnerHTML property to render HTML. here is the working example

Try using dangerouslySetInnerHTML, it is widely used with gatsby where you query the markdowns for content.
<div key={index}>
{descriere.type === 'bold' ? (
<p style={{ color: 'red' }}>
<div dangerouslySetInnerHTML={__html: data.text} />
</p>
) : (
<p style={{ color: 'purple' }}>
<div dangerouslySetInnerHTML={__html: data.text} />
</p>
)}
</div>