Develop Reference

How can I show the card I bought Antd side by side?

import { categories } from './data/categories'
import { useState } from 'react'
import {Card} from 'antd' import './App.css';
import image1 from './assets/images/Resim.png';
const { Meta } = Card;
const CategoryCard = () => {
const [categoriesList, setCategoriesList] = useState(categories)
return (
<>
{categoriesList.map((categori ,key)=>(
<div className='flex-container '>
<div className='flex-div'>
<Card
style={{ width: 240 }}
cover={<img alt="example" src={image1} />}
>
<Meta title={categori.name} description= {categori.description}/>
</Card>
</div>
</div>
))}
</>
); }
export default CategoryCard
I want to align the cards in threes side by side, I tried to do it
using display-flex, but I couldn't, can you help? The css codes I wrote are above.

your code is confusing, anyway if you wanna align them side by side you just add display: flex to the parent element.
(naturally, children will be horizontally aligned when you add display flex to their parent, and if you want them to be aligned vertically just add flex-direction: column;)
.flex-div{
display: flex;
}

Can't place a background image in next JS and Tailwind CSS

I'm stuck and can't place the background image on my next JS app.
Here is my code.
globals.css
.container {
padding: 0 2rem;
background-image: url(../public/images/landing-page-illustration.svg);
}
index.js
import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/navbar';
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Navbar/>
</div>
);
}

You just need to do this. It works for me. Update the tailwind class with your css.
<div className="relative"> <!--position: 'relative' -->
<Image
src="image path"
layout="fill"
objectFit="cover"
/>
<div className="w-full relative"><!-- position: 'relative' -->
<h2 className="text-center font-semibold text-4xl pb-8 pt-14 text-pink-600">hello</h2>
</div>
</div>
The height of background will increase according to the content. You can fix the height by
height:'80vw'

I also stuck in this problem then I just used next-images and declare this in the jest.config.js file like this -
module.exports = {
async redirects() {
return [
{
...
},
];
},
reactStrictMode: true,
future: { webpack5: true },
images: {
domains: ['https://...'],
},
};
const withImages = require('next-images');
module.exports = withImages();
and just used<img /> tag to render the image
<img
src={Wave}
style={{
zIndex: -1,
width: '100%',
position: 'absolute',
}}
className='md:bottom-px origin-center rotate-180 md:rotate-0 '
alt=''
/>

ResizableBox is displaying nothing

I'm experimenting with react-resizable, but this extremely basic example will simply display the text XYZ in the browser, but will otherwise be blank with no error messages. I am expecting a resizable box.
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';
ReactDOM.render(
<div>
<ResizableBox className="box" width={200} height={200} axis="y">
<span className="text">XYZ</span>
</ResizableBox>
</div>,
document.getElementById("root")
);
I derived this test case from the longer example here.
EDIT: And here is the codesandbox: https://codesandbox.io/s/suspicious-bogdan-08f01?file=/src/App.js

You can apply CSS styles with the className property. Here is a working example:
import React from "react";
import { ResizableBox } from "react-resizable";
import "react-resizable/css/styles.css";
import "./style.css";
const Box = () => {
return (
<ResizableBox
className="box borderBlack"
width={200}
height={200}
axis="y"
>
<span className="text">XYZ!!</span>
</ResizableBox>
);
};
export default Box;
style.css file:
.borderBlack {
border: 1px solid black;
}

making antd modal full screen without any padding or margins

I'm new to programming. Here I have an antd modal and I've been trying to find a way to make it full screen. I want the modal to be full scree when it's opened and it shouldn't have any margin or paddings. For example, in the code I added width={1000} but there is still some margin on the left and right of the modal.
So how do I make the modal to take the whole screen without any margin and padding?
code:
https://codesandbox.io/s/otjy6?file=/index.js:539-560

Remove the fixed value for modal width and the centered attribute from your code file:
index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Modal of 1000px width
</Button>
<Modal
title="Modal 1000px width"
// This was removed
// centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
// This was removed
// width={'1000'}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
ReactDOM.render(<App />, document.getElementById('container'));
You need to add these CSS rules to the CSS file.
index.css
.ant-modal, .ant-modal-content {
height: 100vh;
width: 100vw;
margin: 0;
top: 0;
}
.ant-modal-body {
height: calc(100vh - 110px);
}

you need to unset max-width and margin of modal
.ant-modal {
max-width: unset;
margin: unset;
}
you need to unset content in before pseudo-element of ant-modal-centered class
.ant-modal-centered::before {
content: unset;
}
Working Demo

I think instead of Modal you can use the Antd Drawer. Here is the implementation.
import React,{useState} from 'react';
import {Drawer} from 'antd;
const FullScreenDrawer = ()=>{
const [visible,setVisible] = useState(false)
return(
<>
<button onClick={()=>setVisible(true)/>
<Drawer
visible={isVisible}
onClose={() => setVisible(false)}
width="100VW"
>
The content goes here
</Drawer>
</>
);
}

How to display an image in React.js with Bootstrap

Sorry if this is a duplicate question. I can't seem to solve this or find an answer.
Essentially I want to display an image so it responsively adjusts depending on screen size. I'm using the React-Bootstrap example and it just isn't working. Here is the code I'm using and here is a link to the example https://react-bootstrap.github.io/components.html#media-content .
import React from 'react';
import {ResponsiveEmbed, Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
return (
<div style={{width: 660, height: 'auto'}}>
<ResponsiveEmbed a16b9>
<embed type="image/href+xml" href = "https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg"/>
</ResponsiveEmbed>
</div>
);
}
});
This is the App.jsx file it connects too
import React from "react"
import { render } from "react-dom"
import Footer from "./components/Footer"
import HeaderNavigation from "./components/HeaderNavigation"
import App1Container from "./containers/App1Container"
import Carousel from "./components/Carousel"
class App1 extends React.Component {
render() {
return (
<div>
<HeaderNavigation />
<Carousel />
<App1Container/>
<Footer/>
</div>
)
}
}
render(<App1/>, document.getElementById('App1'))

If you want just image why not to use:
<Image src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" responsive />

Bootstrap Jumbotron stuff does not deal with background image. Try this instead
at top of file:
import Jumbotron from "./src/img/1.png"
in your div:
<img style={{height:'auto',width:'100%'}} src={ Jumbotron }/>

Try replacing this code:
const responsiveEmbedInstance = (
<div style={{width: 500, height: 'auto'}}>
<ResponsiveEmbed a16by9>
<embed type="image/svg+xml" src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" />
</ResponsiveEmbed>
</div>
);
Here is an example: http://jsfiddle.net/jayesh24/ywzw5hrt/

It should be a16by9 and not a16b9. Answered by rishipuri

Use react-bootstrap package
import Image from "react-bootstrap/Image";
import "bootstrap/dist/css/bootstrap.css";
<Image src="image.png" fluid/>