Any hint or help would be greatly appreciated!!
In imageList.js, the following {images} is an array.
How can the return of an string "div" of an array return the below image:
return {images}
display this result like if there is a "\n" new line for each record?:
import React from 'react';
const ImageList = props => {
const images = props.images.map((image) => {
return <img src={image.urls.regular} />
});
console.log(props.images)
return <div>{images}</div>;
}
export default ImageList;
result:
for this you are creating img elements and depending on your css they are taking the entire container width. Solving this would require specifying image sizes for example
div{
display: grid;
grid-template-column: repeat(3, 1fr)
}
or
img{
width: 45%;
}
but in the end, it depends on your styling
Your images list is displayed correctly but you miss the css for it.
you can use the GridList or gird system of material ui
or you build your own design.
here is a sample
<GridList cellHeight={160} className={classes.gridList} cols={3}>
{imagess.map((image) => (
<GridListTile key={image.key} cols={image.cols || 1}>
<img src={image.img} alt={image.title} />
</GridListTile>
))} </GridList>
in the link below you can find more usefull information.
Related
have problem with avatar, when I change size (28, 18, 16) - everything is fine.
But when I change size to 24, 22, 20 and other - image is hidden.
Here is my screenshots and code:
Img Component:
import Image from "next/image";
function Img(props) {
return (
<>
<div className={`relative flex h-[${props.size}px] w-[${props.size}px]`}>
<Image
src={
"https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2095&q=80"
}
alt="image"
fill
style={{
objectFit: "cover",
borderRadius: "999px",
}}
/>
</div>
</>
);
}
export { Img };
import { Img } from "../../elements/common/Img";
export default function AvatarPage() {
return (
<>
<div className="flex p-24">
<Img size={14} />
</div>
</>
);
}
Example 1
Example 2
What I do wrong?
Example 3 - if I change size to 38px the image will appear
That is simply not how Tailwind works.
Tailwind just-in-time basically scrapes all of your files (that matches paths in your content from tailwind.config.js) for existing classes and add them to the final distributed CSS. It is totally impossible to create Tailwind dynamic classes via props. You should use style= to add Height.
As a little tip, in the case the possible classes to be generated would be predictable (not [] values, but Tailwind classes), you can make usage of safelist which you can find the documentation here.
I'd like to be able to export React Page to PDF file(s). So far, I've tried jsPDF and html2canvas to capture the page as an image and save it as a pdf. Sample code:
const input = document.getElementById('exportToPDF')
window.scrollTo(0,0)
html2canvas(input)
.then((canvas) => {
document.body.appendChild(canvas)
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF()
pdf.addImage(imgData, 'PNG', 0, 0)
pdf.save("test.pdf")
});
and 'exportToPDF' example:
<div id="exportToPDF">...</div>
I ran into problems with the canvas got cut off when the page content is too large/long. How can I get it to break into multiple pages when needed? It appears as it's limited to one page only.
What I have tried: set window width and height to html2canvas but it didn't help.
Update: I'm open to try other ways to export React page to PDF file(s) and not having to use html2canvas that are free.
Have you tried react-pdf or react-to-pdf these 2 might work for you if you aren't using next.js
I also faced same issue, now resolved by using #progress/kendo-react-pdf
visit https://www.telerik.com/kendo-react-ui/components/pdfprocessing/ for examples
sample code
import { PDFExport } from "#progress/kendo-react-pdf";
const ref: any = React.createRef();
...
<button onClick={() => {
if (ref.current) {
ref.current.save();
}
}}
>
Export PDF
</button>
<div id="container">
<PDFExport paperSize="A4" margin="0.5cm" ref={ref}>
<div id="htmldata" >sample data</div>
</PDFExport>
</div>
If you don't want to display contents of htmldata you can add below css
#container {
width: 0px;
height: 0px;
overflow: hidden;
}
I am a beginner in Next.js and react and I am trying to use <style jsx> for styling my page.
It works in most cases but when I generate the content on the fly the className styles are not applied.
It is hard to explain by words because I am not familiar yet with the terminology, therefore I will try to explain by example (tried to make it as simple as possible).
Here is my page content:
import React from 'react';
const articles = ["dogs", "cats", "mice"]
function JsxDc() {
const articleJsx = articles.map((art, idx) => (
<li className="articleItem" key={idx}>{art} </li>
));
return (
<>
<div className="pageCont">
<h1>Hello World</h1>
<ul>
{articleJsx}
</ul>
</div>
<style jsx>{`
.pageCont {
color: rgba(100, 100, 100, .5);
}
.articleItem{
color: red;
}
`}</style>
</>
)
}
export default JsxDc;
and here is how I see it in the browser:
I expected to see the article list items colored in red, but this is not the case.
What am I missing - how to make this work?
Thank you!
I can't find any examples of accordions where the active class is related to an element outside of the accordion. I'm trying to get an image to change on the side of the accordion, where each image is related to a specific object. I managed to get something working using absolute positioning, but I'm looking for a more elegant solution so I can manipulate styling better.
I can get it to work while the image is inside the accordion under the info text, but can't figure out the styling issue. I think I need to do some refactoring or do away with the array mapping to get it to work but I'm not sure.
Here is a codesandbox of more or less what I want to achieve but without the restriction of absolute positioning - https://codesandbox.io/s/ecstatic-taussig-f084t?file=/src/App.js
You can remove your img tag from your renderedItems and do something like this:
import React, { useState } from "react";
const Accordion = ({ items }) => {
const [activeIndex, setActiveIndex] = useState(0);
const onTitleClick = (index) => {
setActiveIndex(index);
};
const renderedItems = items.map((item, index) => {
const active = index === activeIndex ? "active" : "";
return (
<div key={item.title}>
<div className={`title ${active}`} onClick={() => onTitleClick(index)}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`content ${active}`}>
<p>{item.content}</p>
</div>
</div>
);
});
return (
<div className="container-gallery">
<div className="ui styled accordion">{renderedItems}</div>
<img
className={`content `}
src={`${items[activeIndex].image}`}
style={{
height: "200px",
width: "200px"
}}
alt="img"
/>
</div>
);
};
export default Accordion;
And for the style I don't know what you are using so I made css for the example:
.container-gallery{
display:flex;
flex-wrap:no-wrap;
justify-content: space-between;
}
here a sandBox link
Would it be possible for someone to tell me how to put as many folders (icons) and text as possible below each folder in a row.
At the moment the one folders and text are displayed are displayed on each row. I would like to be able to display 5 folders all on the same row.
Thanks.
render() {
return (<div>
{this.state.Folder.map((item, index) => {
return (<div >
<FontAwesome name={"fas fa-folder fa-3x"} />
<h2> {item.FolderName}</h2>
</div>
);
})}
</div>)
In the wrapper div you could add style/class to display grid, then set the column number to be 5.
Here's an example for the class:
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
}
More details at MDN here.