I'm using react for a project where I'm using a React-Bootstrap Snipper. but Its very tiny and now I want to change its size now. How can I change it?
<div
style={{ width: "200px", height: "200px" }}
className="w-100 d-flex text-[#DC2626] justify-content-center align-items-center">
{/* bootstrap spinner */}
<Spinner animation="border" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
You can pass the width and height to the spinner component.
codesandbox link - https://codesandbox.io/s/broken-surf-vids1x?file=/src/App.js
<Spinner animation="border" role="status" style={{ width: "4rem", height: "4rem" }}>
<span className="visually-hidden">Loading...</span>
</Spinner>
You can also directly use the size tag to change the size
<Spinner animation='border' size='sm' className='mr-2' />
xs (extra small), sm (small), md (medium), lg (large), and xl (extra large)
Related
<Parallax pages={2} ref={ref}>
<ParallaxLayer offset={0} speed={1} factor={2}>
<Snowfall snowflakeCount={35} color={'#53bdfc'} />
<section className='hero-section'>
<div className='container'>
<div
className='hero-main'
style={{ backgroundImage: `url(${background})` }}
>
<div className='hero-text'>
<motion.h1
>
Community{' '}
<motion.span
>
First
</motion.span>
</motion.h1>
<motion.p
>
Text
</motion.p>
</div>
<motion.img
src={HeroImage}
alt='hero_image'
/>
</div>
</div>
<Footer />
</section>
</ParallaxLayer>
<ParallaxLayer
offset={0}
speed={1}
style={{
backgroundImage: `url(${SeaBackground})`,
backgroundSize: 'cover',
zIndex: -2,
}}
/>
</Parallax>
This is in my App.js.
The thing is, if I change something from the code and not hit refresh, the parallax is working. But if I refresh, then it stops working.
Is this some kind of mounting issue? Any help would be greatly appreciated!
I also faced the same issue today and I downgraded react version 18 to 17.0.2 everything works fine so far.
I'm trying to create a swipeableDrawer like that.
I want a button on my swipeableDrawer which I could click to dispatch an action.
But I can't click the button and swipe the swipeable drawer at the same time.
I want it.
<Global styles={{
'#swipeable .MuiPaper-root': {
height: `calc(78% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}/>
<SwipeableDrawer
id={'swipeable'}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={100}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}>
<>
<Card>
<CardContent>
<div className="row">
<div className="col-12">
{!ricalcolaPremioBTNEnabled ?
<Button className={buttonClasses.root}
onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
<Button className={buttonClasses.root}
disabled={!ricalcolaPremioBTNEnabled}
onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
</div>
</div>
</CardContent>
</Card>
</>
<div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
<div className="row p-3">
Content of swipeable drawer
</div>
</div>
</SwipeableDrawer>
</Global>
How can I fix it?
Your button just probably inherits the pointer-events: none CSS from the <SwipeableDrawer/>.
You can override this CSS but you may encounter this issue
I am developing an app in React using redux, I set the reports (which is an array of objects), and the properties (another array of objects) both to the store. Then I do a properties.map(property =>(...more code)) but every time a property is created I need to check if the property.id_property is also in the reports.id_property. I have been trying to include a loop inside the property.id_property but it does not work
This is the properties map:
{properties.map(property => (
<div id="propertiesList"
key={property.id_property}
className="card my-2 ml-2 mainProperty"
style={{
maxWidth: "14rem",
maxHeight: "12rem",
cursor: "pointer"
}}
onClick={() => this.showPropertyDetails(property.id_property)}>
{property.photo_property === null || property.photo_property == "null"
? (
<img style={{ height: 100 }}
src="https://www.esididiomas.es/blog/wp-content/uploads/2018/08/casa.jpg"
className="card-img-top"
alt="...">
) : (
<img style={{ height: 100 }}
src={`${host}properties/${property.photo_property}`}
className="card-img-top"
alt="..."/>
)}
<div style={{backgroundColor: "rgb(70, 88, 102)", color: "white", textAlign: "center"}}
className="card-header card-bottomPart">
<div className="card-body">
<p style={{ fontSize: 14 }} className="card-title" {property.address_line1}</p>
</div>
</div>
</div>
))}
returns a boolean:
reports.some(item => item.id_property === property.id_property)
or if you need to return a value:
reports.find(item => item.id_property === property.id_property)
I need to add link to my logo image.I mean when ever I click my logo image it should redirect to dashboard page.I tried to do it using anchor tag but it is not working properly
<Header className='header' style={{ position: 'fixed', width: '100%' }}>
<div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 0 }}>
{collapsed &&
<a href="/dashboard">
<img src={minLogo} alt='Logo' />
</a>
}
{ !collapsed &&
<span> </span>
}
</div>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggleSideBar}
/>
<div style={{ display: 'inline-block', float: 'right' }}>
<Dropdown overlay={menu} placement="bottomRight">
<Avatar icon='user' />
</Dropdown>
</div>
</Header>
Try this
import { Link } from "react-router-dom";
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
User router Link instead of anchor:
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
I'm currently trying to learn the basics of React so I thought I'd try to mock-up another website. Currently, I'm trying to build a header that looks like Airbnb's
Unfortunately, I can't seem to figure out the aligning and how to get the logo to be all the way on the left side.
Any advice would be appreciated! Thanks!
<Flexbox flexDirection="column">
<Flexbox element="header" height="60px">
<div style={{ flexGrow: 0}}>
<img src={Logo} />
</div>
<div style={{flexGrow: 8}}>
<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
<div>
<Button>Become a host</Button>
</div>
<div>
<Button>Sign up</Button>
</div>
<div>
<Button>Log in</Button>
</div>
</Flexbox>
</Flexbox>