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;
}

How to override material-ui css with styled component?

I'm still a beginner with the ui-material. And I would like to custom my own Button Component with styled-component.
The problem is to override the css according to the button variations, for example if it is primary or secondary:
Here's my code into codesandbox.io
import React from "react";
import PropTypes from "prop-types";
import { CButton } from "./styles";
const CustomButton = ({ children, color }) => {
return (
<div>
<CButton variant="contained" color={color}>
{children}
</CButton>
</div>
);
};
CustomButton.propTypes = {
children: PropTypes.node,
color: PropTypes.oneOf(["primary", "secondary"])
};
export default CustomButton;
import styled, { css } from "styled-components";
import Button from "#material-ui/core/Button";
export const CButton = styled(Button)`
height: 80px;
${({ color }) =>
color === "primary"
? css`
background-color: green;
`
: color === "secondary" &&
css`
background-color: yellow;
`}
`;
import React from "react";
import CustomButton from "./CustomButton";
const App = () => {
return (
<div>
<div
style={{
marginBottom: "10px"
}}
>
<CustomButton color="primary">Primary</CustomButton>
</div>
<div>
<CustomButton color="secondary">Secondary</CustomButton>
</div>
</div>
);
};
export default App;
Could you tell me how I can get my styling to override the ui-material?
Thank you in advance.

It looks like there's a nice example on how to do this in the material-ui docs: https://material-ui.com/guides/interoperability/#styled-components
One thing you seem to be missing is the StylesProvider, which allows your styles to override the default material styles. This seems to work... I don't deal with the conditional in your example, but I don't think that's part of your problem here.
const MyStyledButton = styled(Button)`
background-color: red;
color: white;
`;
export default function App() {
return (
<StylesProvider injectFirst>
<div className="App">
<MyStyledButton color="primary">Foo</MyStyledButton>
</div>
</StylesProvider>
);
}
Here's a codesandbox: https://codesandbox.io/s/infallible-khorana-gnejy

React switching between components or hiding and transitions

I am trying to set up the general page rendering of an app and need help/advice as a newbie. The code below allows me to include components base on a state I can change by clicking on a button. I am not sure if this is the best way to do this but when I click on my buttons they include the components needed.
Now when I click on them the other pages just disappear and show up without any transition. How would I fade out a little slower or transition better to the next component?
My app.js
import React, { useState } from "react";
//Adding Components
import Home from "./Components/Home";
import Game from "./Components/Game";
import Myp from "./Components/Myp";
import Tutorial from "./Components/Tutorial";
//Import Styles
import "./styles/app.scss";
function App() {
const [pageStatus, setPageStatus] = useState(0);
return (
<div className="App">
<section>
{(() => {
switch (pageStatus) {
case 1:
return (
<Game pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
case 2:
return (
<Tutorial
pageStatus={pageStatus}
setPageStatus={setPageStatus}
/>
);
case 3:
return (
<Myp pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
default:
return (
<Home pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
}
})()}
</section>
</div>
);
}
export default App;
My Home.js
import React from "react";
//Import Images or Logos
import logo from "../icons/EduLogo.ico";
const Home = ({ setPageStatus, pageStatus }) => {
return (
<div className="home">
<div className="head">
<h1>EduMemory</h1>
<img alt="EduMemory logo" src={logo}></img>
</div>
<button onClick={() => setPageStatus(1)}>Play</button>
<button onClick={() => setPageStatus(2)}>How To Play</button>
<button onClick={() => setPageStatus(3)}>Tom's MYP</button>
</div>
);
};
export default Home;

You could try AOS library.
You just wrap the component in whatever and add what fade effect you want!
Here's how it looks: https://michalsnik.github.io/aos/
Github: https://github.com/michalsnik/aos

Recently I found this library which is live and works very well https://github.com/dennismorello/react-awesome-reveal
Also I made little sample for you hope it will work for you.
It's custom (No library).
Link for DEMO is here https://codesandbox.io/s/bold-gould-rjczp
Lets say you have this animation from 0 opacity to 100.
When you render component this class automatically will renew itself and animation will start from the beginning.
.fade-in {
animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
App.js
import React, { Component } from "react";
import "./styles.css";
import { Link, Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Secondary from "./secondary";
class app extends Component {
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Link to="/">Main</Link> | <Link to="/secondary">Secondary</Link>
<br />
<br />
<br />
<br />
<Switch>
<Route path="/" exact>
<div className="fade-in">
<div>Main</div>
</div>
</Route>
<Route path="/secondary">
<Secondary />
</Route>
</Switch>
</Router>
</div>
);
}
}
export default app;
Secondary.js
import React from "react";
export default function Secondary() {
return <div className="fade-in">Secondary</div>;
}
This is may be already dead library but if you want you can use react-reveal for transition effects. It's very easy to use, just wrap your content inside <Fade></Fade> tags
import React from "react";
//Import Images or Logos
import logo from "../icons/EduLogo.ico";
import Fade from 'react-reveal/Fade';
const Home = ({ setPageStatus, pageStatus }) => {
return (
<div className="home">
<Fade> //here goes react-reveal/fade
<div className="head">
<h1>EduMemory</h1>
<img alt="EduMemory logo" src={logo}></img>
</div>
<button onClick={() => setPageStatus(1)}>Play</button>
<button onClick={() => setPageStatus(2)}>How To Play</button>
<button onClick={() => setPageStatus(3)}>Tom's MYP</button>
</Fade>
</div>
);
};
export default Home;
Link here https://www.react-reveal.com/examples/common/Fade

Reactjs: Import Sidebar Component to a different page

I have no experience with react, and I'm trying to teach myself by doing/building. I would like to add a sidebar to a page on my site. However, all my research has lead to articles and tutorials that adds the sidebar to the homepage. I don't want it on the homepage, just one page. The look and feel i'm going for is Strip API documentation page:
If i could just get the sidebar on the page, then I can try to style it up the way I like. Below are my files.
component Sidebar.js
import React, { Component } from "react";
import '../Styles/sidebar.css'
class Sidebar extends Component {
render() {
return(
<div className="sidebar">
<h1> I'm the sidebar</h1>
</div>
);
}
}
export default Sidebar;
The page I want to put the sidebar on "Developer.js":
import React from 'react';
import Sidebar from './components/Sidebar'
import './Styles/sidebar.css'
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
export default Developers;
My take at sidebar.css:
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}
app.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { NoMatch } from './NoMatch';
class App extends Component {
render() {
return (
<React.Fragment>
<NavigationBar />
<Layout>
<Router>
<Switch>
<Route exact path = "/" component={Home} />
<Route path="/developers" component = {Developers} />
<Route component={NoMatch} />
</Switch>
</Router>
</Layout>
</React.Fragment>
);
}
}
export default App;
With the added css file, I'm the sidebar just shows up right above Documentation
It's not in the "sidebar", what am i missing?

Yes, to start with your components are configured incorrectly. It's very easy to fix it. Let's start with the sidebar.js.
//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
render() {
return (
<div className="sidebar-container">
<div className="sidebar">
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
</div>
</div>
);
}
}
//Developer.js
import React, { Component } from "react";
import Sidebar from "./Sidebar";
class Developer extends Component {
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Developer Page</h1>
</div>
);
}
}
export default Developer;
And also, in your App.js file, you are importing as named components. That is the reason why you are not getting the desired output. If you're importing named components you will have to export them the same way too. Currently, you are exporting as them as default, so you don't need the curly braces while importing them.
//App.js
import Home from './Home';
import Developers from './Developer';
import NoMatch from './NoMatch';
Update: Import this file inside your sidebar.js like import ./style.css. I have updated the code for sidebar.js file. Please do check.
//style.css
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
display: flex;
flex-direction: column;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}

First of all, your Sidebar component can be simplified to a functional component:
// Sidebar.js
import React from "react";
export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;
Secondly, in you Developers page, you can remove the Sidebar component because you already have it and you are importing it correctly. Next, add it to your Developers component:
// Developers.js
import React from "react";
import { Sidebar } from "./components/Sidebar";
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
);
This assumes you have the following folder structure to ensure your imports work correctly:
src/
app.js
Developers.js
components/
Sidebar.js

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/>