I am connecting an external stylesheet to my React component, and I have a media query and I intend the logo to have a height of 100vh when the screen width is less than 300px. However this media query is ignored and only the original styles apply. I tried adding the css directly in the HTML file using the style tag. Here is the relevant code:
Logo.js
import React from "react";
import "./Logo.css";
export default class Logo extends React.Component {
render() {
return (
<img
alt=""
className="Logo"
src="../logo.png"
/>
);
};
};
Logo.css
.Logo {
position: absolute;
left: 42vw;
bottom: calc(50vh + 4vw);
height: 16vw;
};
#media screen and (max-width: 300px) {
.Logo {
height: 100vh;
};
};
Using hooks in react:
import React from "react";
import { useMediaQuery } from "react-responsive";
export default function Logo() {
const isDesktop = useMediaQuery({
query: '(min-aspect-ratio: 1/1)'
});
let logo = {};
if (isDesktop) {
logo = {
position: "absolute",
left: "42vw",
bottom: "calc(50vh + 4vw)",
height: "16vw"
};
} else {
logo = {
position: "absolute",
left: "38vw",
bottom: "calc(50vh + 6vw)",
height: "24vw",
};
};
return (
<img
alt=""
style={logo}
src="../logo.png"
/>
);
};
Remember to download useMediaQuery by typing
npm install react-responsive --save
into the command line.
Please try adding this to the head section of your code.
<meta name="viewport" content="width=device-width,initial-scale=1">
Related
I am trying to create an element in React, but I cannot get it to be visible. It shows up in the Elements tab of the Chrome developer console, but when I hover over it there it doesn't even show a location. I have other custom elements that work fine, it is this in particular that is not rendering. Here is the code defining the element:
import React from "react";
import ReactDom from "react-dom";
const Modal = (props) => {
const [domReady, setDomReady] = React.useState(false)
React.useEffect(() => {
setDomReady(true)
})
return domReady?ReactDom.createPortal(
<>
<div className="modal">
TEST
</div>
<div onClick={() => {}} className="backdrop">
</div>
</>,
document.getElementById('modal-root')
):null
}
export default Modal;
Here is the CSS that affects it, though it is worth noting that even without this CSS I see nothing:
.modal {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 6px;
background-color: white;
padding: 1rem;
text-align: center;
width: 30rem;
z-index: 10;
position: fixed;
top: 0;
left: 0;
}
.backdrop {
position: fixed;
z-index: 1;
background-color: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
Edit: Here is the file which uses the component:
import { useState } from 'react';
//import Loading from '../Loading/Loading';
import './Income.css';
import { useNavigate } from 'react-router-dom';
import IncomeRow from '../../components/IncomeRow/IncomeRow';
import Button from '../../components/Button/Button';
import Modal from '../../components/Modal/Modal';
const Income = () => {
//Initializing
const navigate = useNavigate();
// modal visibility states
const [editModalVisible, setEditModalVisibility] = useState(false);
const [deleteModalVisible, setDeleteModalVisibility] = useState(false);
const [addModalVisible, setAddModalVisibility] = useState(false);
// show modal to edit income
const onEditClick = () => {
setEditModalVisibility(true);
}
const onDismissEditModal = () => {
setEditModalVisibility(false);
}
//returning JSX
return (
<>
<div className='Incomes'>
{/* TODO: make these autogenerate from database */}
<IncomeRow name="income 1" source="Company 1" date="1/1/2022" amount={123.45} id="1" editFunction={onEditClick}/>
<IncomeRow name="income 2" source="Company 2" date="7/31/2022" amount={420.69} id="2"editFunction={onEditClick}/>
</div>
<Button text="Add Income"/>
<Modal dismissModal={onDismissEditModal}/>
</>
);
}
export default Income
Here is App.js, which holds the base of the layout:
import React, { useState} from 'react';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import 'bootstrap/dist/css/bootstrap.min.css';
//import { ThemeContext, themes } from './context/themeContext';
import { Outlet, useNavigate} from 'react-router-dom';
function App() {
return (
<div className="App">
<Navbar/>
<div className='body'>
<div id='modal-root'>
<Outlet/>
</div>
</div>
</div>
);
}
export default App;
Here:
Open the app in desktop width, notice the div has green background
Reduce browser width to mobile, the div background should change to gray
Again, increase browser width to desktop, notice the gray background remains, instead of green
What should have happened
The background in last step should be green as in the first step, isn't it?
Logging value of isMobile does seem to show it is being updated.
Here is also code:
import React from 'react';
import styled from 'styled-components';
import { useMediaQuery } from 'react-responsive';
let MenuItem = styled.div`
height: 100px;
width: 100px;
border:1px solid red;
background-color: green;
// Select those items which are children of .submenu
.submenu & {
background-color: ${({ isMobile }) => {
return isMobile && 'lightgray';
}};
}
`;
function App() {
const isMobile = useMediaQuery({ query: '(max-width: 524px)' });
return (
<div>
<div className="submenu">
<MenuItem isMobile={isMobile}>test</MenuItem>
</div>
</div>
);
}
export default App;
import React, {useEffect, useState} from 'react';
import styled from 'styled-components';
import {useMediaQuery} from 'react-responsive';
let MenuItem = styled.div`
height: 100px;
width: 100px;
border:1px solid red;
background-color: green;
`;
function App() {
const isMobile = useMediaQuery({query: '(max-width: 524px)'});
const [color, setColor] = useState('green');
useEffect(() => {
if (isMobile) setColor('silver');
else setColor('green');
}, [isMobile])
return (
<div>
<div className="submenu">
<MenuItem style={{background: color}} isMobile={isMobile}>test</MenuItem>
</div>
</div>
);
}
export default App;
You could re-write this as:
const MenuItem = styled.div`
height: 100px;
width: 100px;
border:1px solid red;
background-color: green;
`;
const SubMenu = styled.div`
${MenuItem} {
background-color: ${({ isMobile }) => (isMobile ? `red` : 'lightgray')};
}
`;
function App() {
const isMobile = useMediaQuery({ query: '(max-width: 524px)' });
return (
<>
<SubMenu isMobile={isMobile}>
<MenuItem>MenuItem in SubMenu</MenuItem>
</SubMenu>
<MenuItem>MenuItem</MenuItem>
</>
);
}
Stackblitz
It is the correct answer:
https://stackblitz.com/edit/react-t7gqwx?file=src%2FApp.js,src%2Findex.js
You shouldn't use .submenu &.
I am new to React JS. Now struggled with a little thing that I need to set an element width equal to its height. We can manage with in jQuery something like below:
var divWidth = $('.main').width();
$('.main').height(divWidth);
$( window ).resize(function() {
var divWidth = $('.main').width();
$('.main').height(divWidth);
});
.container {
width: 100%;
max-width: 400px;
}
.main {
width: 100%;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<diV class="main">
test
</diV>
</div>
How can we do like this in React JS?
You can use the jquery window listener to pass props to a component and set it style. It will have the same effect.
import React, { Fragment, useState, useEffect } from "react";
import ReactDOM from "react-dom";
function LiveVisitors() {
const [dimensions, setDimensions] = useState({
x: document.body.clientWidth,
y: document.body.clientHeight
});
window.addEventListener("resize", () => {
setDimensions({
x: document.body.clientWidth,
y: document.body.clientHeight
});
});
let fraction = dimensions.x / 10;
return (
<div
style={{
border: "1px solid red",
width: fraction,
height: fraction
}}
>
{JSON.stringify(dimensions)}
</div>
);
}
const wrapper = document.getElementById("container");
ReactDOM.render(<LiveVisitors />, wrapper);
You can modify this playground: https://codesandbox.io/s/react-playground-forked-v66j1?file=/index.js:0-719
I am working on a project which will feature a leaderboard with player icons, name and scores.
Here is my initial design that im trying to implement.
Im using cards to hold each element and will eventually will be inserting data from my DB, however rn I'm just trying to get the design skeleton together all smooth. I can get the text working and aligned fine but cant figure out how to it with text. Before I was just using the cards for text and the images as its own element, it worked fine til I tried to put more than one row.
Now when I'm trying to put the image in as a card, it's just printing info about the image instead of the actual image. I'm quite new to React so sorry if its a simple solution. I've been playing with this all day and cant find a solution that works for me.
Heres the code so far! Thanks so much for taking the time to read and any advice is greatly appreciated!
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import dogicon from './assets/doggo.png'
import './index.css';
export const Grid = styled.div`
`;
export const Row = styled.div`
display: flex;
background-color: #c3b0d3;
display: block ruby;
`;
export const Col = styled.div`
flex: ${(props) => props.size};
`;
const CardStyle = styled.div`
display: block ruby;
padding-left: 30px;
padding-right: 30px;
`;
console.log(dogicon);
const LeaderboardHeader = () => {
return (
<div className="leadheader">
<h2>LEADERBOARD</h2>
</div>
)
}
class Card extends React.Component {
render(){
return (
<div className="card">
<p>{this.props.name}</p> <p>{this.props.score}</p> <p>{this.props.icon}</p>
</div>
)
}
}
class App extends React.Component {
// fires before component is mounted
constructor(props) {
// makes this refer to this component
super(props);
// set local state
this.state = {
name: "PLAYER 1",
score: "200",
icon: require('./assets/doggo.png'),
};
}
render() {
const {name} = this.state;
const{score} = this.state;
const{icon} = this.state;
return (
<div className="container">
<LeaderboardHeader />
<Grid>
<Row>
<CardStyle>
<Col size={1}>
<Card icon={icon}/>
</Col>
</CardStyle>
<CardStyle>
<Col size={1}>
<Card name ={name} />
<Card name ={name} />
<Card name ={name} />
</Col>
</CardStyle>
<CardStyle>
<Col size={1}>
<Card score={score} />
<Card score={score} />
<Card score={score} />
</Col>
</CardStyle>
</Row>
</Grid>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.css
#import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');
body {
font: 50px;
font-family: 'Passion One', cursive;
margin: 20px;
background: #7E549F; overflow: hidden;
text-align: center;
}
.container{
width: 550px;
}
.leadheader {
margin-top: 100px;
background-color: #422D53;
color: #C3B0D3;
text-align: center;
width: 100%;
height: 50px;
font-size: 45px;
text-align: center;
border-radius: 5px 5px 0 0;
margin: 0;
padding-bottom: 25px;
}
.card {
background-color: #C3B0D3;
color: #2A1D34;
margin: 0 auto;
padding: 100px 0;
font-size: 40px;
}
You should use that image data in the src attribute of an <img> tag. Since you are using <p>{this.props.icon}</p> it is coerced to string, hence displaying the text value of the image.
So, this would be the final result:
class Card extends React.Component {
render(){
return (
<div className="card">
<p>{this.props.name}</p> <p>{this.props.score}</p> <img src={this.props.icon} />
</div>
)
}
}
Is it possible to display the popup of a vertical submenu "the other way around" ? I have one SubMenu item in a fixed Sidebar at the bottom of my page. It contains links for the users profile and the logout link. But since it is at the bottom of the page the submenu will open and part of it is outside the of the page.
Here is a screenshot of the current situation.
I searched for options the documentation but I couldn't find a suitable solution for the problem. So basically what I want to achieve is growing the popup from bottom to top and not top to bottom.
Here is the source for the Sidebar component. It is quite a early stage so there are still other improvements to the code to do.
import React from 'react';
import { connect } from 'react-redux';
import { Layout, Menu, Icon } from 'antd';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { toggleSidebar } from '../../actions/ui';
import { logoutUser } from '../../actions/user';
const { Sider } = Layout;
const SubMenu = Menu.SubMenu;
const Logo = styled.div`
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
`;
const UserMenu = styled(SubMenu)`
position: fixed;
text-align: center;
bottom: 0;
cursor: pointer;
height: 48px;
line-height: 48px;
color: #fff;
background: #002140;
z-index: 1;
transition: all 0.2s;
`;
const mapStateToProps = state => ({
ui: state.ui
});
const mapDispatchToProps = dispatch => {
return {
toggleSidebar: () => dispatch(toggleSidebar()),
logoutUser: () => dispatch(logoutUser())
};
};
class Sidebar extends React.Component {
componentDidMount() {}
render() {
const { ui, logoutUser } = this.props;
return (
<Sider
collapsed={ui.sidebarCollapsed}
//onCollapse={toggleSidebar} // toggle is disabled
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0
}}
>
<Logo />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<UserMenu
key="sub1"
placement="topLeft"
title={
<span>
<Icon type="user" />
<span>User</span>
</span>
}
>
<Menu.Item onClick={logoutUser} key="3">
Logout
</Menu.Item>
<Menu.Item key="4">Profile</Menu.Item>
</UserMenu>
</Menu>
</Sider>
);
}
}
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(Sidebar)
);
Is there a way to achieve this ?
Yes it should be possible. <Menu>uses the rc-menu package, and supports all the properties from this package, even if they are not documented in the and.design doc page.
Menu position is guided by the builtinPlacements property, which in turn uses https://github.com/yiminghe/dom-align, which gives you lot of flexibility in how to position the elements.