Develop Reference

Keep image position when shrinking screen

I'm trying to implement responsiveness to this screen but I'm having trouble keeping things in place. When I'm in desktop mode, the laptop image stays where it should be, in the center of the lines, on top of the square. But I just shrink the screen, and the image of the lines meets the edge of the screen and shrinks out of sync with the laptop image. Is there any way I can synchronize this downsizing?
This is my page:
import type { NextPage } from 'next'
import Navbar from '../components/Navbar'
import logo from '../assets/logomarca-branco.png'
import wave from '../assets/svg/wave.svg'
import Lines from '../components/Lines'
import Computer from '../components/Computer'
import AutoWrite from '../components/AutoWrite'
import MobileNavbar from '../components/MobileNavbar'
const Home: NextPage = () => {
console.log(wave);
return (
<div>
<section className='bg-[#352575] w-full h-screen relative'>
<Navbar logo={logo}>
<span>Home</span>
<span>Sobre</span>
<span>Serviços</span>
<span>Portifólio</span>
<span>Contato</span>
</Navbar>
<MobileNavbar logo={logo}></MobileNavbar>
<div style={{ height: 'calc(100% - 56px)' }} className="relative">
<div className='inline-block ml-16 mt-32'>
<AutoWrite></AutoWrite>
</div>
<Computer></Computer>
<Lines></Lines>
<img src={wave.src} alt="wave" className='absolute bottom-0' />
</div>
</section>
<section className='bg-[#F3F4F5] w-full h-screen relative'></section>
</div>
)
}
export default Home
This is the computer container:
import computer from '../assets/svg/computer.svg'
import computerFloor from '../assets/svg/computer-floor.svg'
export default function Computer() {
return (
<>
<img src={computer.src} alt="computer" className='absolute z-10 right-8 bottom-20' />
<img src={computerFloor.src} alt="computerFloor" className='absolute z-0 right-8 bottom-20 opacity-50' />
</>
)
}
This is the lines container:
import lineBright from '../assets/svg/lines-bright.svg'
import linesClean from '../assets/svg/lines-clean.svg'
export default function Lines() {
return (
<div className='w-min h-min'>
<img src={lineBright.src} alt="lineBright" className='absolute right-0 bottom-0 opacity-40' />
<img src={linesClean.src} alt="lineClean" className='absolute right-8 bottom-0 opacity-40' />
</div>
)
}

You can use background-position-x with the desired horizontal placement of the lines background.
For example:
.w-min img{
background-position-x: 25%;
}
...if the lines background would be a part of the CSS,
but in your case you'd need left (or right), like so:
.w-min{
left: 25%;
position: relative;
}

Media query with StyleSheet doesn't work in react-pdf

I have attempted to let 'react-pdf' to change its size by using media query.
I do understand that:
// when I put mouse cursor on <Document>, it displays:
(alias) class Document import Document
<div className="pdf">
<Document file={HomePDF}>
<Page scale={1.5} pageNumber={1} />
</Document>
</div>
is how to adjust the scale in general.
But with media query on css,
#media only screen and (max-width: 600px) {
.home-text {
width: 400px;
}
.pdf {
width: 400px;
}
}
Despite reading the document, I can't get an idea.
https://react-pdf.org/styling#media-queries
The size of pdf displayed on the page does not take effect.
With this error message:
"Compiled with problems:X
ERROR in ./src/pages/Home/Home.js 12:15-32
export 'StyleSheet' (imported as 'StyleSheet') was not found in 'react-pdf/dist/esm/entry.webpack5' (possible exports: Document, Outline, Page, pdfjs)"
I feel like I lost the way. What should I do to change the size of this react-pdf outcome other than the hook? Or is there a way I can do?
// Home.js
import React from "react";
import "./Home.css";
// pdf
import React from "react";
import "./Home.css";
// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import { StyleSheet } from "#react-pdf/render";
import HomePDF from "../../pdf/resume.pdf";
const styles = StyleSheet.create({
section: {
width: 200,
"#media max-width: 400": {
width: 300,
},
"#media orientation: landscape": {
width: 400,
},
},
});
function Home() {
return (
<>
<div className="home-wrapper">
{/* layer very back */}
<div className="home-content">
<div className="home-text">
{/* profile picture, box */}
<img
className="profile"
src={require("../../images/me-photo.jpg")}
/>
<hr />
{/* pdf */}
<div className="pdf">
<Document file={HomePDF}>
{/* <Page scale={1.5} pageNumber={1} /> */}
<Page size="A4" style={styles.page} />
</Document>
</div>
</div>
<hr />
</div>
</div>
</>
);
}
export default Home;

Height in theme ui embed

I have this embed theme-ui component and it's height doesn't works. In the console appears ok, but it displays with 100%;
<Embed src={url} sx={{width: '800px', height: '400px'}}/>
The embed is inside a modal of 100vw for 100vh
Thanks

I've been testing with this component, and there is no problem when I define a specific size.
Be sure that you're putting in your code /** #jsx jsx */ and after that declare jsx, like this import { jsx } from "theme-ui";
And try to use the lastest version, in the example I'm using 0.3.1 for theme-ui
UPDATE
Digging deeper, I think it's necessary create your own component where you can define an iframe because Embed component doesn't allow you change some css properties directly.
Theme-ui allows you create an iframe using Box component setting the a prop like this:
<Box as="iframe" .../>
OwnEmbed.js
/** #jsx jsx */
import { jsx, Box } from "theme-ui";
const OwnEmbed = ({
src,
frameBorder = 0,
allowFullScreen = true,
width = "100%",
height = 0, /** <-- It's necessary set height from outside*/
iFrameWidth = 560,
iFrameHeight = 315,
allow,
...props
}) => {
return (
<Box
{...props}
__css={{
width: width,
height: height,
position: "relative",
overflow: "hidden"
}}
>
<Box
as="iframe"
src={src}
width={iFrameWidth}
height={iFrameHeight}
frameBorder={frameBorder}
allowFullScreen={allowFullScreen}
allow={allow}
__css={{
position: "absolute",
width: "100%",
height: "100%",
top: 0,
bottom: 0,
left: 0,
border: 0
}}
/>
</Box>
);
};
export default OwnEmbed;
The implementation it's same as Embed component
Main.js
/** #jsx jsx */
import { jsx, Embed, Box, Flex } from "theme-ui";
import React from "react";
import OwnEmbed from "./OwnEmbed";
class Main extends React.Component {
render() {
return (
<Box p={1} bg="red">
<OwnEmbed
src="https://www.youtube.com/embed/GNCd_ERZvZM"
width="100px"
height="100px"
/>
<hr />
<OwnEmbed
src="https://www.youtube.com/embed/mQ055hHdxbE"
width="200px"
height="200px"
/>
<hr />
<OwnEmbed
src="https://www.youtube.com/embed/7oVnHbHhxLo"
width="400px"
height="200px"
/>
</Box>
);
}
}
export default Main;
If you highlight the element in the browser you'll see the correct size.
Take a look at this: Change size Embed from theme-ui

React slick giving blank background image in div inside <Slider {...settings}>

i am very new to React, i am trying to use react slick, so as to achieve image as background with carousel . but when i try to do it, i am getting blank instead of image. i cannot see my inline style as well when i inspect. but if i use tag that is showing the image.
below is the code
import React, { Component } from 'react';
import './home.css';
import Slider from "react-slick";
import image2 from '../../images/image2.jpg';
import image1 from '../../images/image1.jpg';
import image3 from '../../images/image3.jpg';
class Home extends Component{
render(){
let pics = [
{"name":"pic_1",
"url": image1
},
{"name":"pic_2",
"url": image2
},
{"name":"pic_3",
"url": image3
}
]
let settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
}
return(
<div >
<Slider {...settings}>
{pics.map((picture, i)=>{
return(
<div key={i} style={{
backgroundSize: 'cover',
border: 'none',
height: '100vh',
backgroundImage: `url(${picture.url})`
}}>
<div>
{picture.name}
</div>
</div>
)
}
)
}
</Slider>
</div>
)
}
}
export default Home;
i try going through this answer Setting a backgroundImage With React Inline Styles but this didn't resolve my problem.
thanks in advance!

Slick changes the css style of the root element of each slide.
Add your actual slide image as a child of each slide's first element.
This way it works for me:
<Slider {...settings}>
{slideshowImages.map((image, index) => (
<div key={index} style={{width: '100%', height: '400px'}}>
<div
style={{
backgroundImage: `url(${image.url})`,
width: '100%',
height: '400px',
backgroundSize: 'cover',
backgroundPosition: 'center'
}} />
</div>
))}
</Slider>
Note that I am setting the same width & height to the root element of each slide and its child element holding the image. These dimensions may not work for you specific slideshow.

How to create virtual scrolling for images using React js

Whats my requirement: i have some images in my external folder and i need to import to component and display it and also have to use Virtual Scroll here i have to display 1 row in div and in that 1 row have to show 5-6 images
What i did : i consumed images using context from external folder and showed images in 1 rows in div and 5-6 images but i am facing issue unable to set it to Virtual scrolling
as i checked react-virtualized & react-window plugin but i am not sure how my data is used in that format
After using the react-tiny-virtual-list images are getting stacked
below is my code
class App extends React.Component{
state={
Response:[],
}
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
this.setState({ Response:data})
}
render(){
return(
<div className="container" id="imagecontainer">
<div className="viewport">
{this.state.Response.map((image, index) => <img key={index} src={image} alt="info"></img> )} }
</div>
</div>
)
}
.container {
padding: 0% 6%;
height: 400px;
}
.viewport {
height: -webkit-fill-available;
width: 100%;
border: 1px solid black;
overflow: scroll;
}
img {
height: 250px;
width: 150px;
padding: 35px;
}
After implementing React-tiny-list
<div id="container">
<div id="viewport">
<VirtualList
height='400px'
width='100%'
itemCount={this.state.items.length}
itemSize={20} // Also supports variable heights (array or function getter)
style={{padding:'20px'}}
renderItem={({index, style}) =>
<div key={index} style={style}>
<img key={index} src={this.state.items[index]} alt="info"></img>
</div>
}
/>
</div>
</div>

you can also use the https://github.com/bvaughn/react-virtualized plugin in this if you want to display this as table you can choose list or you can choose grid also .For you requirement i recommend using Masonry from 'react-virtualized';
below is the sample for displaying
import React from 'react';
import {
CellMeasurer,
CellMeasurerCache,
createMasonryCellPositioner,
Masonry
} from 'react-virtualized';
import 'react-virtualized/styles.css';
var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;
const cache = new CellMeasurerCache({
defaultHeight,
defaultWidth,
fixedWidth: true
})
// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
cellMeasurerCache: cache,
columnCount: 4,
columnWidth,
spacer: 27
})
function cellRenderer ({ index, key, parent, style }) {
const datum = images[index]
const height = columnWidth || defaultHeight ;
return (
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}
>
<div style={style}>
<img
src={datum}
style={{
height: height,
width: columnWidth,
display: "block"
}}
alt="info"
/>
</div>
</CellMeasurer>
)
}
class Grid extends React.Component{
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
}
render(){
return(
<div id="container">
<div id="viewport">
<Masonry
cellCount={images.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
height={400}
width={1320}
/>
</div>
</div>
)
}
}
export default Grid;
I hope this will resolve your issue

If you're having trouble implementing the virtual scroll, note that the order of the imports is important when doing this, so pay heed to this - it could be contributing to your issue. (An aside: There is an npm plugin for implementing a virtual list.)
An overview of the import order for virtual scroll is:
import * as React from 'react';
import Paper from '#material-ui/core/Paper';
import {
Grid,
VirtualTable,
TableHeaderRow,
} [from material ui];
import {
your-components
} from 'your-path';
(above is non-specific, just a rough guide to the order)
You could also use a ScrollView if you are unable to implement a "Virtual scroll".
The following style will give you a horizontal scroll (as opposed to the default vertical), to enable you to display your images in a horizontally-scrollable row
<ScrollView horizontal={true}>
Hope this helps