I'm recently using react-spring and it works really well but I'm having some issues when I have to apply an onClick on childs.
Here is my main structure:
<anim.button className="c"
style={{ opacity: opacity.interpolate(o => 1 - o), transform }}>
<Bar />
</anim.button>
<anim.button className="c"
style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}>
<Bar />
</anim.button>
An onClick on the anim.button would work perfectly fine of course, but that's not what I'm trying.
Here is my <Bar /> component:
const Bar = () => (
<div className="bar">
<Checkbox
onClick={() => {
set(state => !state)
}}
/>
</div>
)
I also tried using the <anim.div> instead of an <anim.button> but this gives me the same results.
Now the problem here is that it seems like react-spring puts a layer onto my <Bar /> component. Is there a way to use the onClick in my component instead of the one that is used onto anim.button?
Given that Checkbox is also a component and it might not have onClick handled try putting onClick on the wrapping div or inspect the Checkbox component.
Haven't used react-spring ever but structuring your Bar component like this may do the trick.
const Bar = (props) => (
<div onClick={() => {set(state => !state)}}>
<anim.button {...props}>
<div className="bar">
<Checkbox />
</div>
</anim.button>
</div>)
then rendering it like this:
<Bar className={'c'} style={{ opacity: opacity.interpolate(o => 1 - o), transform}}/>
<Bar className="c" style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}/>
You could rather wrap the Bar in a div: <animated.div> you are wrapping a button around a checkbox which is not great. onClick will trigger as expected.
<animated.div className="c"
style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}>
<Bar />
</animated.div>
Issue has been found and didn't actually has anything to do with react-spring.
The position absolute styling was causing this.
Related
I am trying to get the values of a specific card when it is clicked in swiperJS but am not finding in the documentation if it is possible to do so.
Hoping to not resort to wrapping each slide in a label and input button.
My code here:
<Swiper
slidesPerView={'auto'}
spaceBetween={200}
centeredSlides={true}
pagination={{
"clickable": true
}}>
{Cards.map((card, idx) => {
return (
<div className="row" style={{ display: 'inline-block' }}>
<div className="col-12 swiper-container">
<SwiperSlide>
<Cards
number={card.number}
name={card.name}
expiry={card.expiry}
cvc={card.cvc}
// focused={focus}
/>
</SwiperSlide>
</div>
</div>
)
})}
</Swiper>
Is it possible to do so?
Looking at swiper's react source code it seems like SwiperSlide renders by default into a div node . This node can receive a onClick prop, which should execute whatever function you want. That would look something like this:
<SwiperSlide onClick={()=> console.log(card.name)}>
// ...
</SwiperSlide>
If for some reason that doesn't work either, consider adding the onClick to a div already wrapping the slide (for example div.col-12.swiper-container)
I have this toolbar with 2 custom buttons and 3 imported material data grid toolbar components, I want them to match but preferably apply the material styles to my custom components yet I can't find a style import for them anywhere in their docs. But anyway I can get them to match would be huge. Does anyone have some advice?
const Toolbar = () => {
return (
<GridToolbarContainer>
<div
className={classes.toolbar}
onClick={() => {
toggleSearch();
}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
<div
className={classes.toolbar}
onClick={() => {
bookmarkCases(selectedRows);
}}
>
<BookmarkBorderIcon />
<p>SAVE CASES</p>
</div>
<GridColumnsToolbarButton />
<GridDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
};
Instead of making an icon button out of a <div>, why not use the startIcon prop in an MUI <Button />, e.g.
From this:
<div
className={classes.toolbar}
onClick={() => {toggleSearch()}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
to this:
<Button
className={classes.toolbar}
onClick={() => {toggleSearch()}}
startIcon={<SearchIcon />}
>Search
</Button>
All the styles should match because MUI DataGrid toolbar buttons are just MUI Buttons
After a bit of a struggle I found a solution. I was able to achieve a consistent style for all toolbar buttons by passing the styles through the DataGrid itself.
export const StyledDataDrid = styled(DataGridPremium)<DataGridPremiumProps>(({ theme }) => ({
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
fontSize: '16px !important',
color: '#074682',
},
'& .MuiBadge-badge': {
backgroundColor: '#074682',
},
},
}));
Or you can style it on the DataGrid component using the sx property as explained in this issue: https://github.com/mui/mui-x/issues/3686#issuecomment-1018469717
I admit I am very new to React and still getting my head around things, but I am using the react-lightbox-component to display images in a grid and that works just fine but the onClick event doesn't do anything then it calls the toggleLightBox function.
I know the onClick is working as I tested it against a simple console.log, what am I missing to be able to display the image in a lightbox when clicked?
const App = ({ compile }) => (
<div style={{margin: 20}}>
<header style={{textAlign: "center"}}>
<h1><Words animate>Art</Words></h1>
</header>
<body>
<h3>Android</h3>
</body>
<Lightbox
images={androidimages}
renderImageFunc={(idx, image, toggleLightbox, width, height) => {
return (
<img
key={idx}
src={image.src}
style={{width: '150px', height: '200px', margin: '20px'}}
onClick={
toggleLightbox.bind(null, idx)
}
/>
)
}
}
/>
</div>
);
I stuck on one problem in my project I use 2 different components one is a card and second is a chart and i show the API data on that component but when I rendering both components it will be override to each other how I can solve this problem
render() {
return (
<div style={{ display: "flex" }}>
{
this.state.data.map((item, index) => {
return <div key={index} style={{ width: "300px" }}>
<Cards value={item} title={item.bikeId} time={item.timeStamp} />
<Speedometer speed={item.speed} />
</div>
})
}
</div>
)
}
card and speedometer are two different components it will be created based on API response
By Overriding, if you mean the components are overlapping on one another, that might probably a CSS issue, try putting a <br> between both the components.
or
try increasing the width to 100% and remove that 300px
{userList.map(v => (
<Card
key={v.user}
onClick={() =>
console.log("object")
}
>
<Card.Header
title={v.user}
thumb={require(`../img/${v[tableName].avatar}.png`)}
extra={<span>{v[tableName][extra]}</span>}
/>
<Card.Body>
{v[tableName].desc.split(/\n/g).map((v, k) => (
<li key={k}>{v}</li>
))}
</Card.Body>
</Card>
))}
Click events are not available on the .map() function in React
Card Component of React material UI does not support onClick props so you should not use it.
Quick Fix would be to enclose it inside a div and add onClick on the div as shown below:
<div onClick=> {() =>
console.log("object")
}>
<Card>
.....
</Card>
</div>
Or You can use some different library from :
https://material-ui.com/api/card-action-area/