I'm starting to make a registration page in ReactJS, but when I apply styles in my styles.css file, some don't work and some do.
This is my RegisterPage.jsx component:
export default function RegisterPage() {
return (
<>
<div className="row g-0">
<div className="col-7 background">Background</div>
<div className="col-5 registerForm">RegisterForm</div>
</div>
</>
)
}
This is my styles.css:
body{
background: #cccaaa;
}
.background{
background: "#8d45b7";
}
.registerForm{
background: "#fff";
height: 100vh;
}
Of course I added my styles.css to my index.html file:
<!-- My CSS -->
<link type="text/css" href="./src/styles.css" rel="stylesheet">
The only style that is being applied correctly from my styles.css is:
body{
background: #cccaaa;
}
But the styles that I defined through classes, don't work unless I do this in my component, for example in the RegisterForm:
export default function RegisterPage() {
return (
<>
<div className="row g-0">
<div className="col-7">Background</div>
<div
className="col-5"
style={{
background: "#fff",
height: "100vh",
}}>
RegisterForm
</div>
</div>
</>
)
}
And of course I would like to define my styles in my styles.css and not in my component, what am I doing wrong?
I already found the mistake, I was writing:
background: "#8d45b7";
Instead of:
background: #8d45b7;
Silly mistake :)
change it to this:
.background {
background-color: #8d45b7;
}
.registerForm {
background: #fff;
height: 100vh;
}
Related
We are doing a YouTube clone for a project and I'm trying to style it. Regardless of what I put for styling it disregards it and nothing is applied.
I have tried adding it on the main div, the link, and it still doesn't work.
import React from "react";
import { Link } from "react-router-dom";
const DisplayVideos = ({videos}) => {
return (
<div >
{videos.map((video, index) => {
// get video id
return (
<div style={{'margin-bottom': '80px'}}>
<Link to={`/video/${video.id.videoId}`}>
<div key={index}>
<img src={video.snippet.thumbnails.medium.url} alt="" />
</div>
<div>
<div >{video.snippet.title}</div>
</div>
</Link>
</div>
);
})}
</div>
);
}
export default DisplayVideos;
styles page:
.display-title{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(29, 50, 67);
}
.display-description{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(0, 0, 0);
}
Link{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* CSS just to show the bounds */
border: 2px solid;
background-color: #eee
}
.text {
width: 20%;
inline-size: 10px;
overflow-wrap: break-word;
}
There is no HTML element called Link so you are not targeting anything when you do Link { instead you would need to do:
.link {
// styles
}
Then do <Link className="link" />
https://reactrouter.com/docs/en/v6/api#link
A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <Link> work as you'd expect. You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
With react you have to use lowerCamelCase for CSS atributes.
Try marginBottom instead of margin-bottom in your component.
Use className='class1 class2 etc.' if you want to use CSS classes in HTML elements
<div className='class1 class2 etc.'>
Or
<div style={{marginBottom: '80px'}}>
Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Little addition, I'm just learning react it's probably not the best solution but it seems to work for me.
Exactly you can use history.push to do everything, for example history.push(path/${id}). Hope you get the idea
---> reply
function TourItem({ currentItems }) {
const [itemId, setItemId] = useState();
useEffect(()=>{
if (itemId) {
history.push(`/tour-detail/${itemId}`);
}
}, [itemId]);
return (
<div className={cx("wrapper")}>
{currentItems && currentItems.map(item => (
<div key={item.id} className={cx("item")} onClick={()=>setItemId(item.id)}>
<div className={cx("inner")}>
<div className={cx("image")}>
<img src={item.images[0]} alt={item.tourName} />
</div>
<div className={cx("meta")}>
<h4 className={cx("tour-name")}>
<Link to={`/tour-detail/${item.id}`}>{item.tourName}</Link>
</h4>
<p>Khởi hành từ: <span>{item.departureFrom}</span></p>
<p>Thời gian: <span>{item.time}</span></p>
<p>Giá từ: <span><FormatPrice>{item.price}</FormatPrice> VNĐ</span></p>
</div>
</div>
</div>
))}
</div>
);
}
I want to separate them and line up horizontally and vertically
import React from 'react'
import "./Projects.css";
import { Link } from 'react-router-dom';
function Projects({projectsData}) {
return (
<>
{projectsData.map((index)=>{
const{img,link,title}=index
return(
<div className="_div_">
<div className="cards_">
<div className="_imag">
<img src={img}/>
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
</div>
</div>
)
})}
</>
)
}
export default Projects
._div_{
background-color: #fff;
height: 100vh;
width: 100%;
/* To adjust the height as well */
height: fit-content;
}
._imag{
height: auto;
width: 20%;
background-color: rgb(183, 183, 204);
border-radius: 9px;
}
._imag img{
margin-top:0px;
border-radius: 7px;
}
._writings{
height: 40%;
}
.cards_{
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
import React from 'react'
import BodySection from "../Navbar/BodySection"
import Navbar from "../Navbar/Navbar"
import Content from "../Navbar/Content"
import {Data1,projectsData} from "./Data"
import Projects from "../Navbar/Projects"
function Home() {
return (
<>
<BodySection/>
<Content{...Data1}/>
<Projects projectsData={projectsData}/>
</>
)
}
export default Home
I want to separate the cards and put them horizontally and vertically and not just vertically.
thank you.
Please ignore what I am about to write because it wont let me post this saying I need to add more details but I dont have more details to add.
The top level should be the flex into which you map the cards, something like this:
function Projects({ projectsData }) {
return (
<div className="_div_">
<div className="cards_">
{projectsData.map((index) => {
const { img, link, title } = index;
return (
<div className="_imag">
<img src={img} />
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
);
})}
</div>
</div>
);
}
You should probably have a card element together with these properties on cards_ to position them better:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
This is a perfect use case for css flexbox. I threw together a quick codesandbox for you.
You can use my code as a starting point and expand out to your use case.
If you need a quick intro to flexbox here's a great video.
I want to create pages which can override over another pages in React. Like see for an example here in Youtube: https://youtu.be/n5kr99DAjDk?t=441. The 'Post' page is opened with full height and a 'Back' button. This was easily possible in React Native. How could it be done in React for web.
Below is the code for reference:
App.js
const Routing = () => {
return (
<Router>
<TopNavbar />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/newPage" component={NewPage} />
</Switch>
<BottomNavbar />
</Router>
);
};
Home.js
const Home = () => {
return (
<div style={{ marginTop: "80px", position:'relative' }}>
<h2>Home Page</h2>
<Link to="/newPage">
<button>Click Here</button>
</Link>
</div>
);
};
export default Home;
NewPage.js
const NewPage = () => {
return (
<div className="newPageCSS">
<h2>New Page</h2>
</div>
);
};
export default NewPage;
NewPage.css
.newPageCSS {
margin-top: 80px;
position: absolute;
top:0;
left: 0;
}
I have tried position:absolute in NewPage but, no use. What could be best possible solution?
Please have a look at the given below codesandbox link for clarity of code.
Here is the codesandbox link: https://codesandbox.io/s/react-material-forked-9dodd
It sounds like you'd like your new page component to take up all the room of the page except for top and bottom navigation.
The solution is entirely CSS, however you'll need to tinker with styles to get margins/padding correct. It looks like you're using a UI library which can clash with your style sheet.
Here are the changes:
Update your main container to use flexbox instead of trying to control for top/bottom navs with pixels
#root {
display: flex;
min-height: 100vh;
flex-direction: column;
}
Then, get your new page component to expand by adding a flex 1. Added red border to easily visualize change.
.newPageCSS {
margin-top: 80px;
border: 2px solid red;
flex: 1;
}
Update your home page so bottom nav sticks to bottom and you can scroll home content
.homePageCSS {
margin-top: 80px;
max-height: 50%;
/* position: relative; */
flex: 1;
max-height: 70vh;
overflow: auto;
}
Position fixed is now unnecessary for bottom nav
.makeStyles-gridList-2 {
width: 100%;
border: 1px solid grey;
/* bottom: 0px; */
/* position: fixed; */
padding: 0;
flex-wrap: nowrap;
background: white;
}
Using filepond I need to customize the filepond droparea, meaning that I need to add some custom HTML with some placeholder images to give an idea to the user about what kind of images should be uploaded and should allow multiple uploads.
Is there a way to do this?
I tried to add an absolutely positioned conatiner with the placeholders but I can't cover on upload my custom element.
Here is how I'm using Filepond inside react :
...
return (
<div className="uploads">
<div className="uploads__placeholders">{placeholderImages}</div>
<FilePond
ref={(ref) => (this.pond = ref)}
files={this.state.files}
labelIdle={""}
allowMultiple={true}
maxTotalFileSize={10485760}
acceptedFileTypes={this.props.acceptedFileTypes}
labelMaxTotalFileSize={"Total file size should be lesser than 10MB."}
maxFiles={maxFilesAllowed}
allowProcess={this.props.process ? this.props.process : true}
imagePreviewHeight={135}
//imagePreviewTransparencyIndicator={"grid"}
server={{...}}
onremovefile={(file) => {...}}
oninit={(t) => {...}}
onupdatefiles={(fileItems) => {...}}
/>
</div>
);
...
So I create a custom wrapper and I align with css on top of filepond wrapper but this seems to not be the ideal workaround.
The key answer is to use the labelIdle with beforeAddFile option, which gives you a way to change the default template HTML, and removing any content you want beforehand. You should add it to your Filepond initialisation.
I'm note sure how to remove the content in react, but a jQuery example would be something like this :
FilePond.parse(document.body);
const inputElement = document.querySelector('#file_upload');
FilePond.registerPlugin(FilePondPluginImagePreview);
const pond = FilePond.create(inputElement, {
allowMultiple: true,
imagePreviewHeight: 135,
labelIdle: `
<div style="width:100%;height:100%;">
<p>
Drag & Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span><br>
Some samples to give you an idea :
</p>
</div>
<div class="images" id="allImages">
<div class="images_child">
<img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
</div>
<div class="images_child">
<img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
</div>
<div class="images_child">
<img src="https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg">
</div>
</div>
`,
beforeAddFile (e) {
$('#allImages').html('');
}
});
.filepond--drop-label {
background-color: #ECF7E9;
height: auto!important;
}
.images {
display: inline-block;
padding: 0 5px;
}
.images_child {
display: contents;
padding: 0 5px;
text-align: center;
}
.filepond--root * {
height: auto;
padding: 0 4px;
}
img {
width: 25%;
opacity: 0.8;
filter: grayscale(100%);
border-radius: 8px;
cursor: pointer;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
<script src="https://unpkg.com/filepond-plugin-image-preview#4.6.4/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond#4.17.1/dist/filepond.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://unpkg.com/filepond#4.17.1/dist/filepond.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://unpkg.com/filepond-plugin-image-preview#4.6.4/dist/filepond-plugin-image-preview.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<input type="file" name='file' class='filepond' multiple id='file_upload' />
https://jsfiddle.net/d6e2nh93/
Disclaimers :
1) I didn't NOT do the full CSS as your image example as I see no need to, you can easily do it yourself.
2) This is not a react answer, but an answer to guide you through the right direction on how to use filepond to achieve your desired result.