Develop Reference

How to add auto positioning in popover from reactstrap

I have a popover through which I am displaying a drop down list. Currently the position is set to top. However the drop down is taking up too much space, so I want the popover to detect how much space is there and set the position accordingly.
Here is the code for popover:
<Popover
isOpen={this.state.showDropDown}
target={`dropdownbutton-${id}`}
toggle={this.toggle}
className={`dropdown-with-tags-popover ${this.props.className}`}
placement={this.props.placement || 'top'}
flip={false}
>
//code for list of users and search bar
</Popover>
Please comment if further information is needed

How to readjust positioning of Bootstrap Overlay/Popover in React dynamically?

I am trying to readjust the positioning of an Overlay, containing a Popover, who's content changes dynamically. As it currently stands, the Popover content updates, but the position of the Popover doesn't change. This results in the updated Popover being in the wrong position (kinda floating there).
First state with content displaying correctly.
After content of Popover updates.
Here's my code:
<Form.Group>
<Form.Label>Listing URL</Form.Label>
<Form.Control name="url" ref={this.urlInput} value={this.state.current_listing.listing.url} onChange={this.handleURL} placeholder="Enter URL"/>
<Overlay target={this.urlInput.current} show={this.state.similar_listings.length > 0} placement="right">
<Popover style={{width: "700px", maxWidth: "700px"}} key={seedrandom(this.state.current_listing.url)}>
<Popover.Title as="h3">Similar Listings</Popover.Title>
<Popover.Content>
<ListingAccordion listings={this.state.similar_listings} callback={this.callback} mode="similar"/>
</Popover.Content>
</Popover>
</Overlay>
</Form.Group>
I've tried adding the shouldUpdatePosition prop to the Overlay as mentioned in previous questions, but it didn't fix anything. I also tried with the OverlayTrigger component, but that also had the same issue.

I ended up solving my own question. Hopefully this helps someone. I fixed the positioning issue by forcing React to re-render the Overlay component.
This answer gets all the credit.
All I did was add the random value key to the Overlay, and update the key whenever the contents change.
Overlay:
<Overlay key={this.state.overlayKey} ... > ... </Overlay>
In the function where the contents of the Overlay are being changed:
this.setState({ key: Math.random() });

Dynamic pageSize property of the Ant Design's Table

I'm using Ant Design to get a data Table with pagination. My desired result is to have this component stretched over the entire height of a parent container and adjust the number of rows according to the available space. But, since I have to think about different end users' screen sizes I can't simply assume how many rows would be there in a single page, like this:
<Table
pagination={{ pageSize: 6 }}
columns={columns}
dataSource={sampleData}
/>
Is there any recommended approach to make the pageSize property react to a screen's height changes dynamically? Or should I just set certain breakpoints manually?

There is no antd API for such behavior, you need to calculate it by yourself.
Useful functions to determine the screen height are:
clientHeight
getBoundingClientRect
Notice that those element functions, in React you should access them via a reference, for example with useRef.

The way I solve this UX problem is by to set the scroll property:
scroll={{ y: "calc(100vh - 250px)" }}
With this, the height of the Table will adapt to the user's client height, you'll just need to change 250px to whatever works for you.

ReactJS - Responsive Layout using Media Queries

I am working on a web app, and I am trying to make it responsive, but I am running into a few problems. I am using media queries to detect if the screen width is > than a certain amount or < than a certain amount. Based on that, I would want to change the layout of my component, so that it does not cram and move everything out of alignment. However, it seems like if my goal is to reorder the child components within my component using conditional rendering based on the media query result, then my code would be repeated multiple times. Hence, I am checking to see if there are any other ways to accomplish this.
Below is a screenshot of the browser when the screen size gets smaller, the contents get too cramped up, and hence it messes up the alignment.
Below is a snippet of my code (this code represents the right side of the image -> Revenue and Revenue KPI)
<Row justify="space-around">
<Col span={11}>
<Statistic
title="Revenue"
value={data[metric].revenue}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
<Divider type="vertical" />
<Col span={11}>
Revenue KPI
<Button shape='circle' size='small' onClick={() => handleClick('rev', metric, 'post')} style={{ marginLeft: '5%' }}>
<PlusOutlined />
</Button>
<Statistic
value={data[metric].rev_kpi}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
</Row>
What I would want to do, is to change the grid layout once the screen width is smaller than a certain amount, and instead of the components above being in the same Row, I would want each to be in their Row (stacking on top of each other). However, if I were to do this using conditional rendering, it seems like I would have to repeat the code quite a fair bit, which seems tedious and messy. Hence, I am hoping if there are any more efficient methods to achieve what I would want to make.
The UI package I am using is AntD (where I got the components for Row, Col, Statistic, Button)
https://ant.design/components/grid/
this is my media query function (I use this function to return a boolean based on the query I pass in)
import { useEffect, useState } from "react";
function useMediaQuery(
query,
defaultMatches = window.matchMedia(query).matches
) {
const [matches, setMatches] = useState(defaultMatches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) setMatches(media.matches);
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [query, matches]);
return matches;
}
export default useMediaQuery;
All help is appreciated, thanks all! Do guide me along as I am new to React and especially new to implementing responsive websites!

Since Row and Col in ant design seems to be based on flex you should try to use the CSS order property to re-arrange your elements
https://developer.mozilla.org/en-US/docs/Web/CSS/order
It is also available as a prop on the Col component:
https://ant.design/components/grid/#Col
CSS order demo (use media query to change order value for various screen sizes):
div {
display: flex;
flex-direction: column;
}
#reverse:checked ~ div>p:first-child {
order: 2;
}
<input type="checkbox" id="reverse"/>
<label for="reverse">reverse</label>
<div>
<p>First text element in HTML</p>
<p>Second text element in HTML</p>
<div>
For even more complex rearrangement of your elements you could use CSS Grid:
grid-template-areas: give custom names to areas in your grid
grid-area: place element in the grid using one of your custom names
use media-queries to change grid-template-areas and it should work nicely
https://css-tricks.com/snippets/css/complete-guide-grid/

How to set full screen particles-bg in React

I am having a problem regarding how to set Particle-bg to the whole page in ReactJS. I used lines style and it is working but it fits only for a section. If I add more content on the page Particles-bg doesn't apply to them. I want to set the background to the whole page.
This is the function that I used. <ParticlesBg num={50} type="lines" bg={true}/>
If someone knows how to fix this help me.

Particle-bg automatically applies to the whole background. when you add more components, it goes underneath that component. so you have to use something which has a transparent background.
return (
<div>
<YourComponent/>
<ParticlesBg color="#000000" num={100} type="cobweb" bg={true} />
</div>
);