<div className="room">
<Draggable
bounds="parent"
grid={[50,50]}
handle=".handle"
onStart= {this.handleStart}
onDrag= {this.handleDrag}
onStop= {this.handleStop} >
<img src={table} className="handle" />
</Draggable>
</div>
So this is my code for the Draggable component, it's pretty basic. The problem is the Draggable component isn't recognizing the fact that "room" is offset because it's centered by flexbox. Is there anyway around this?
Related
I'm using react-on-screen and Animate.css to create slideInUp animation on scroll. But I want to the animation to show up when the page is loaded and the scroll-down happened. Now in my code, the animation happens every time I scroll up and down. How do I prevent that? Additional to that, if there is any way to do it without using Animate.css or react-on-screen I would love to learn it.
Here is the code that I track scrolling and Animate.css:
<>
<div className={`container mb-5 `}>
<h1 className='text-center my-5 blue-text'>SOME HEADER</h1>
<TrackVisibility partialVisibility>
{({ isVisible }) =>
<div className={`row animated-row my-element ${isVisible ? "animate__animated animate__slideInUp animate__repeat-1 my-element" :""}`} >
<Card />
<Card />
<Card />
<Card />
</div>
}
</TrackVisibility>
</div>
</>
I saw the "Usage with Javascript" codes on the Animate.css main page but I couldn't apply them to my React code.
Thanks.
dear.
Now I am building React app, and have a problem with react-multi-carousel.
enter image description here
Here are parts of my code. How can I solve this?
<div className="team_navigaation">
<div className="button"><i className="fa-solid fa-chevron-left"></i></div>
<div className="button"><i className="fa-solid fa-chevron-right"></i></div>
</div>
<Carousel
customLeftArrow={<CustomLeftArrow />}
customRightArrow={<CustomRightArrow />}
responsive={responsive}
>
{teams.map((team) =>
<Slide key={team.name} img={team.img} name={team.name} role={team.role}/>
)}
</Carousel>
If you want I will share the code and please help me.
Thanks.
Since React 18 I have some errors when rendering the application and can't nest any elements as it seems.
For example, I have the following code in my application:
return (
<Card>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</Card>
);
This code worked fine up to React 18, now from 18 version I get the following error:
Likewise, element arrays can no longer be rendered, again, the following code worked fine in React17:
<DataTable metaKeySelection={false} selectionMode={"single"} onSelectionChange={e => {
setSelection(e.value)
}} selection={selection} stripedRows={true} showGridlines={true} size={"small"}
value={artifacts}>
{colModels}
</DataTable>
And now since React18 the following problem occurs:
It seems to me that with v18 React expects React Nodes everywhere and JSX as such is no longer accepted.
These errors disappear as soon as I enclose said elements with a React fragment, is this really the only way to solve this problem?
Thanks in advance!
Yes React 18 did make some changes I am not sure about your second issue but your first issue with card can be fixed like this...
Just add <> and </> React Fragment as the singlular child.
<Card>
<>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</>
</Card>
I'm trying to integrate the react-slick dots with custom arrows from material UI icons, but both of them don't seem to integrate in a straight line with dots in middle, and arrows on left and right of the end dots. Since the number of images may vary, adding left & right margins doesn't seem to be an option. Can anyone help me with that?
[Edit] - Adding code
<Modal>
<Slider {...settings}>
{arr.map((x)=>{
<>
<div>
<img src="x.url"/>
</div>
<div>
{x.des}
</div>
</>
})}
</Slider>
<button className="button-left" onClick={()=>{goToPrev}}>left</button>
<button className="button-right" onClick={()=>{goToNext}}Right</button></Modal>
I need to do two things:
Need to increase default icon arrow size
Need to change icon to a different one when the panel is expanded.
I managed to do that this way:
<Collapse
expandIconPosition='right'
className='collapse-container'
// this works fine
expandIcon={({isActive}) => isActive
? <img src={closeCollapseIcon} />
: <img src={openCollapseIcon} />}
>
<Panel header='Question...' key='3'>
<p className='help-panel-text'>Some text</p>
</Panel>
</Collapse>
My question is:
Is there a way to do the same but in a more elegant way? My solution seems to be too straightforward.
You dont need to render two img tags, you can achieve the same thing with one tag. A more appropriate way would be using the Icon component provided by ant design
expandIcon={({ isActive }) => (
<Icon
component={isActive ? closeCollapseIcon : openCollapseIcon}
width="2em"
height="2em"
/>
)}