I am using owl-corusel in my React Project. I have a problem, the problem is that if an owl-item doesn't fit right on the screen I don't want it to show up. Just center and show how many items appear complete.
Here is my React code :
<OwlCarousel
className="owl-theme"
dots={false}
loop={true}
margin={2}
nav={true}
items={categoryTags.length}
autoWidth={true}
center={true}
>
{categoryTags
? categoryTags.map((item) => {
return (
<div className="item" key={`tag_item_${item.id}`}>
<Link style={{ width: "100%" }} to={"/c/" + item.slug}>
<img
src={item.avatar_url}
alt={item.title}
className="full_height full_height"
/>
<div className="flex align_center cat_ico_hover full_width full_height justify_center">
<i
className="cat_ico"
style={{ backgroundImage: `url(${item.icon_url})` }}
></i>
<span>{item.label}</span>
</div>
</Link>
</div>
);
})
: null}
</OwlCarousel>
Related
How do I easiest map through an array of menu items using the NextJs < Link > component?
The code I have is:
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={classNames(
router.pathname == item.href
? 'bg-indigo-800 text-white'
: 'text-indigo-100 hover:bg-indigo-600',
'group flex items-center rounded-md px-2 py-2 text-base font-medium'
)}
>
<item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-indigo-300"
aria-hidden="true"
/>
{item.name}
</Link>
))}
Which works using < a > tags instead of < Link >. The error message I get says:
"Error: Multiple children were passed to with href of /admin/home but only one child is supported https://nextjs.org/docs/messages/link-multiple-children"
Now I could hard code the menu items, but that is not what I want to do.
The items themselves look like this:
const navigation = [
{ name: 'Dashboard', href: '/admin/home', icon: HomeIcon },
{ name: 'Users', href: '/admin/users', icon: UsersIcon },
{ name: 'Products', href: '/admin/products', icon: FolderIcon },
]
Any advice on how to do this?
So your problem is as the error says you are passing multiple children to the Link component
So if we breakdown your Link component that you are trying to map we can see the problem.
<Link>
<item.icon /> //ITEM 1
{item.name} //ITEM 2
</Link>
What you should have is a parent for the children you are trying to pass.
<Link>
<div> //This is now just 1 item
<item.icon />
{item.name}
</div>
</Link>
So your final code will end up looking like this
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className={classNames(
router.pathname == item.href
? 'bg-indigo-800 text-white'
: 'text-indigo-100 hover:bg-indigo-600',
'group flex items-center rounded-md px-2 py-2 text-base font-medium'
)}
>
<div>
<item.icon
className="mr-3 h-6 w-6 flex-shrink-0 text-indigo-300"
aria-hidden="true"
/>
{item.name}
</div>
</Link>
))}
I am using Swiper React to creater a Carousel Slider from a map of an object received from an API.
Here is my code :
<div className="border-4">
<Swiper
className='width-carousel'
modules={[Navigation]}
spaceBetween={40}
slidesPerView={2.5}
pagination={{ clickable: true }}
autoplay={{ delay: 2500, disableOnInteraction: false }}
>
{props.mediaArea.mediaObjects && props.mediaArea.mediaObjects.map((slide, index) => {
return (
<SwiperSlide key={index}>
<img className="rounded-lg shadow-lg p-3 h-96" src={slide.contentUrl ?? "https://dummyimage.com/600x400/000/fff"} alt={slide.title ?? ""} />
{slide.title && <p className="font-Montserrat font-semibold mt-8">{slide.title}</p>}
{slide.description && <p className="font-Montserrat text-gray-500 text-sm">{slide.description}</p>}
</SwiperSlide>
)
})}
</Swiper>
</div >
The problem is : If I set 100% width in my class, the sidebar will be larger than the screen because I have a sidebar of 300px.
If I make calc(100% - 300px), the calculation is not taken in consideration (the size of Swiper still 100%).
I would like it to fit the width of the <section> it is into.
Any help on this ?
PS : I set the container to width : 100%.
I have a react Card.
I want to bring the image on the card to the right-side of card and it should also be parellel to the Name Pankaj Rout, and should be responsive.
This is what I have tried so far,
var userMap = [
{name: "Pankaj Rout", email: "pankaj.rout#somedomain.com"}
]
userData.map((data) => {
return (
<div key={data.email}>
<Card style={cardStyle}>
<Card.Body>
<div class="col-sm-6 text-right">
<img
className={classes.img}
style={cardImgStyle}
src="https://www.w3schools.com/howto/img_avatar.png"
alt="sans"
/>
</div>
<Card.Title> {data.name} </Card.Title>
<Card.Subtitle className="mb-2 text-muted">
General Manager
</Card.Subtitle>
<Card.Text> {data.email} </Card.Text>
<Button> Delete </Button>
<Button> Email </Button>
<Button> Chat </Button>
</Card.Body>
</Card>
</div>
);
classes is used from withStyles hook
const useStyles = (theme) => ({
img: {
justifyContent: 'right',
}
});
following style is referring to cardImgStyle
const cardImgStyle = {
width: "30%",
height: "30%",
borderRadius: "50%",
display: "flex",
flexWrap: "wrap",
};
Could anyone please point out what is wrong here?
Thanks!!
justifyContent : 'space-beetwin' ;
or
for img :
float :' right';
So I have my layout from Ant design and on the profile page theres one div at the top which has user's info.
Under it, there are many divs (one for each post), essentially mapping a post array into post divs.
Problem is, ive struggled with centring them to the middle of the page but after messing around with flex, i thought i did a good job in the end. It looked perfect at first when the user has no posts underneath the profile div. The moment there's posts, the profile div goes to the left alot for some goddamn reason.
The posts are perfectly centered like i want them but my problem is with the profile div. To fix it, i did a margin-left on the it. This makes it look perfect. But not so fast. Now when theres no posts, its awfully to the right cuz it was perfectly centered before the margin-left
So is there any way i can pass in a condition to say if posts.length === 0, and set the margin-left accordingly?
Losing my head.
Layout.js code:
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Network</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content" style={{ background: "#fff ", padding: 24, minHeight: 280, display:"flex", alignItems:"center", flexDirection: "column"}}>
{children}
</div>
</Content>
UserProfile.js code :
<div>
<div className="site-card-wrapper" style={{display: "inline-block",marginBottom:20, width: 500, marginLeft:355}}>
<Row gutter={16} type="flex" style={{justifyContent: "center", }}>
<Col span={16}>
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc",}}>
<div style={{display:"flex", justifyContent: "space-between"}}>
<CardContent>Followers: {user.followers === undefined ? "0" : user.followers.length}</CardContent>
<CardContent>Following: {user.following === undefined ? "0" : user.following.length}</CardContent>
</div>
</Card>
</Col>
</Row>
</div>
{
(userPosts.length > 0) ?
<Heading>Posts</Heading> :
<Heading>No posts yet</Heading>
}
{
userPosts.map(post => {
return <SinglePost key={post.id} post={post} />
})
}
</div>
SinglePost.js code (simplified):
<div className="site-card-wrapper" style={{marginBottom:20, width: 1200,}}>
<Row gutter={16} type="flex" style={{justifyContent: "center"}}>
<Col span={16} >
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc"}}>
<div style={{fontSize: 18, marginTop: -10, whiteSpace: "pre-line"}}>
{post.content}
</div>
<Likes>{likes} Likes</Likes>
</Card>
</Col>
</Row>
</div>
<div className="site-card-wrapper"
style={
{display: "inline-block",
marginBottom:20,
width: 500,
marginLeft:posts.length === 0 ? 0 : 355
}}>
use above conditional statement to handle run time marginLeft
What is the problem in my code? This is a slider:
<Slider {...settings}>
{slides.map(function(item){
return (
<div key={item.id} className="item-slider"
style={{background: `url(images/covers/${item.cover})`}}>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}
</Slider>
I'm using react-slick, and I tested if the item.cover is receiving some data, and it did receive data. but when I put the data in the style it does not appear inspecting it and it does not receive any errors.
Sample: code here
I had the same issue, try wrapping every slide into a div like this:
<Slider {...settings}>
<div>
<div className='slider__image' style={{'backgroundImage': `url(${House})`}} />
</div>
<div>
<div className='slider__image' style={{'backgroundImage': `url(${Map})`}} />
</div>
<div>
<div className='slider__image' style={{'backgroundImage': `url(${NotAvailable})`}} />
</div>
</Slider>
This way I got it working.
I think I got it. Try importing the image at the top of the file, and then using the import variable as the url. I got it to work:
https://codesandbox.io/s/xvnq2q21w4
import photo from "../img/reed.jpg";
const styles = {
background: `url(${photo})`
};
Below is an example I tried to load images in the background and it worked :)
Sample response. Here you can see, I have added require.
const items = [{
name: 'hola',
background: require('./img-placeholder.png')
},{
name: 'cola',
background: require('./img-placeholder.png')
},{
name: 'lola',
background: require('./img-placeholder.png')
}]
const renderImages = items.map((val, key) => {
return <div key={key} >
<div style={{ background: `url(${placeholder})`, height: 200 }}>
<div className="caption">
<h4>{val.name} - {key}</h4>
</div>
</div>
</div>
});
Note : The require() method is used to load and cache JavaScript modules. So, if you want to load a local, relative JavaScript module into a Node.js application, you can simply use the require() method.
You missing to define:
require()
height image
backgroundRepeat
<Slider {...settings}>
{slides.map(function(item){
console.log(item.cover, 'check this');
return (
<div key={item.id} className="item-slider" style={{
background: 'url(' + require(`./images/covers/${item.cover}`) + ')', backgroundRepeat: 'no-repeat', height: 300 }}>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}
</Slider>
Update: as you mentioned in comments that the path is from the public folder use process.env.PUBLIC_URL to access public folder
<div key={item.id} className="item-slider" style={{
background: 'url(' + process.env.PUBLIC_URL +`/images/covers/${item.cover}` + ')', backgroundRepeat: 'no-repeat', height: 300 }}>
You have to import image at the top of your file as
import myimage from './images/covers/imagename';
Also you can use dynamic importing like :
import(`${path}`)
.then(module => this.setState({ module: module.default }))
Then you can use image, where cover would be import name like:
<Slider {...settings}>
{slides.map(function(item){
import(`${path}`)
.then(module =>
return (
<div key={item.id} className="item-slider"
style={{background: `url(images/covers/${item.cover})`}}>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
); )
})}
</Slider>
Try this:
backgroundImage: "url(" + require("../../img/img.png") + ")"
assuming the img.png is in img folder under src (webpack)
Okay, for some reason you can't add styling to the element you are using to house the return content. So here's what you're gonna do:
<Slider {...settings}>
{slides.map((item) => {
return(
<div key={item.id} className="sliderImage">
<div className="backImage" style={{background:`url(/images/covers/${item.cover})`}}>
<div className="slideCaption">
<h4>{item.title}</h4>
<h1>{item.topic}</h1>
</div>
</div>
</div>
)
})}
</Slider>
I hope this helps you solve your problem. ;)