I have a modal window and i want it to hide if user clicked on modal itself(black background), but click is trigerring by clildrens to. Here is the example:
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
export function Modal({ show, children }) {
return (
<DivModal show={show}>
{children}
</DivModal>
)
}
const DivModal = styled.div`
display: ${props => (props.show ? 'block' : 'none')};
`
How to fire event's only for modal itself?
Ehh, this work, but if you click on wraper div - modal will not hide :(
After some googling ant try, found a way. Key point is that you need to stop onClick event propagation from parent to childrens. In my case i just wrapped my component by div with onClick={e => e.stopPropagation()}.
import React from 'react'
import styled from 'styled-components'
export function Modal({ show, showModalSet, children }) {
return (
<DivModal onClick={() => showModalSet(false)} show={show}>
<div onClick={e => e.stopPropagation()}>{children}</div>
</DivModal>
)
}
const DivModal = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: ${({ show }) => (show ? 'block' : 'none')};
z-index: 10;
overflow-y: scroll;
`
Component use:
<Modal show={showModal} showModalSet={showModalSetFunctionInUsePlace}>
Another approach, that i'am happy now with is to use refs and compare what component was clicked:
import React, { useRef } from 'react'
import styled from 'styled-components'
export function Modal({ show, showModalSet, children }) {
const modalRef = useRef(null)
function handleClick(e) {
if (e.target == modalRef.current) showModalSet(false)
}
return (
<DivModal onClick={handleClick} show={show} ref={modalRef}>
{children}
</DivModal>
)
}
const DivModal = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: ${({ show }) => (show ? 'block' : 'none')};
z-index: 10;
overflow-y: scroll;
`
Related
I'm building a tic-tac-toe app. I haven't added functionality between the X's and O's, right now, I'm stuck on rending ONE image via the onClick. I've set the state to make the onClick - at least I think - and I've written out my conditional, but its rendering X images for each square. How do I render an image for only ONE square instead of them all? Here is my code:
Xs.js
import React from 'react'
import styled from 'styled-components'
import X1 from './images/X1.jpg'
import X2 from './images/X2.jpg'
import X3 from './images/X3.jpg'
const Image = styled.img`
width: 175px;
height: 175px;
`
const Xs = () => {
const X = [X1, X2, X3]
const randomXImg = Math.floor(Math.random() * X.length)
return (
<Image src={X[randomXImg]} />
)
}
export default Xs
Cell.js - this is just a div to show for the actual square
import React from 'react'
import styled from 'styled-components'
const CellBlock = styled.div`
display: flex;
align-items: center;
justify-content;
border: 1px solid white;
width: 200px;
height: 200px;
background-color: white;
`
const Container = styled.div`
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
box-sizing: border-box;
`
const Board = styled.div`
display: grid;
grid-template-columns: 210px 210px 202px;
grid-template-rows: 210px 210px 202px;
background-color: darkgreen;
`
const Cell = ({ onClick, isTurn, children }) => {
let squares = []
squares = Array.from(Array(9).fill(''))
return (
<Container>
<Board>
{
squares.map((box, id) => (
<CellBlock
key={id}
id={id}
onClick={onClick}
isTurn={isTurn}
>
{children}
</CellBlock>
))
}
</Board>
</Container>
)
}
export default Cell
Here is the gameboard which is the parent component of both Xs.js and Cell.js
Gameboard.js
import React, { useState } from 'react'
import Cell from './Cell'
import Xs from './Xs'
const Gameboard = () => {
const [ player, setPlayer ] = useState('X')
const [ isNotOccupied, setIsNotOccupied ] = useState(false)
return (
<>
<Cell
onClick={() => setIsNotOccupied(!isNotOccupied)}
isTurn={player}
>
{ isNotOccupied && player === 'X' && <Xs />}
</Cell>
</>
)
}
export default Gameboard
Any help would be greatly appreciated.
I am styling my react component with styled-components. I want an icon component that can be used in different places just by changing size, colour props etc. I also want to pass icons names as props for different places. I am succeeded to change the size and colour but don't know how to pass the icon name as per requirement.
Here is my generic icon component:
import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie } from 'react-icons/fa';
const StyledSVGIcon = styled(FaUserTie)`
svg {
fill: black;
${({ size }) =>
size &&
css`
width: ${size};
height: ${size};
`}
${({ transform }) =>
transform &&
css`
transform: ${transform};
`}
path {
${({ color }) =>
color &&
css`
fill: ${color};
`}
}
}
`;
const GenIcon = props => {
return (
<StyledSVGIcon
src={`/icons/${props.name}.svg`}
color={props.color}
size={props.size}
transform={props.transform}
/>
);
};
export default GenIcon;
And I want to use it like this:
<GenIcon
name="FaUserNurse"
color="red"
size="16px"
/>
But the GenIcon component is not working. please help me where I am doing wrong. the icon could be any kind like svg or any other react icon library.
Try this out, you're close:
import React from "react";
import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import { FaUserTie, FaDocker } from "react-icons/fa";
const IconStyler = styled.span`
color: ${(props) => props.color};
& svg {
${(props) =>
props.small &&
css`
width: 14px !important;
height: 14px !important;
`}
${(props) =>
props.med &&
css`
width: 20px !important;
height: 20px !important;
`}
${(props) =>
props.large &&
css`
width: 28px !important;
height: 28px !important;
`}
}
`;
const Icon = ({ children, ...props }) => {
return <IconStyler {...props}>{children}</IconStyler>;
};
const GenIcon = () => {
return (
<div>
<h5>Any Icon</h5>
<div>
<Icon color="blue" small>
<FaUserTie />
</Icon>
</div>
<div>
<Icon color="orange" large>
<FaDocker />
</Icon>
</div>
</div>
);
};
export default GenIcon;
Here's a sandbox link: https://codesandbox.io/s/flamboyant-allen-60ho1?file=/src/GenIcon.js
I'm following this react-flip-toolkit tutorial in order to animate a<div> expansion in a component:
This is the tutorial code:
import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'
const AnimatedSquare = () => {
const [fullScreen, setFullScreen] = useState(false)
const toggleFullScreen = () => setFullScreen(prevState => !prevState)
return (
<Flipper flipKey={fullScreen}>
<Flipped flipId="square">
<div
className={fullScreen ? 'full-screen-square' : 'square'}
onClick={toggleFullScreen}
/>
</Flipped>
</Flipper>
)
}
My project however, unlike the functional Component example above, uses Class components, like so:
class Field extends Component {
constructor(props) {
super(props);
this.state = {
players:[],
};
}
getPlayersByPosition = (players, position) => {
return players.filter((player) => player.position === position);
};
render() {
const { players } = this.props;
if(players){
return (
<div className="back">
<div className="field-wrapper" >
<Output output={this.props.strategy} />
// this is the target div I want to expand
<div className="row">
{this.getPlayersByPosition(players, 5).map((player,i) => (
<Position key={i} >{player.name}</Position>
))}
</div>
</div>
</div>
);
}else{
return null}
}
}
export default Field;
How can I declare AnimatedSquare() in my Class component and encapsulate my target <div> above within <Flipper/> and <Flipped/>?
I've converted the example to a class based component for you. You should be able to work the rest out from this example:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Flipped, Flipper } from "react-flip-toolkit";
import "./styles.css";
class AnimatedSquare extends Component {
state = {
fullScreen: false
};
toggleFullScreen() {
this.setState({ fullScreen: !this.state.fullScreen });
}
render() {
const { fullScreen } = this.state;
return (
<Flipper flipKey={fullScreen}>
<Flipped flipId="square">
<div
className={fullScreen ? "full-screen-square" : "square"}
onClick={this.toggleFullScreen.bind(this)}
/>
</Flipped>
</Flipper>
);
}
}
ReactDOM.render(<AnimatedSquare />, document.querySelector("#root"));
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.square {
width: 5rem;
height: 5rem;
cursor: pointer;
background-image: linear-gradient(
45deg,
rgb(121, 113, 234),
rgb(97, 71, 182)
);
}
.full-screen-square {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-image: linear-gradient(
45deg,
rgb(121, 113, 234),
rgb(97, 71, 182)
);
}
I am using React Context in order to manage a global state.
So I have defined my Context with its Provider and its Consumer.
I have my videoplaying-context.js
import React from "react";
import { createContext } from 'react';
// set the defaults
const VideoContext = React.createContext({
videoPlaying: false,
setPlayingVideo: () => {}
});
export default VideoContext;
In my _app.js I have:
import App from 'next/app'
import { PageTransition } from 'next-page-transitions'
import VideoContext from '../components/videoplaying-context'
class MyApp extends App {
setPlayingVideo = videoPlaying => {
this.setState({ videoPlaying });
};
state = {
videoPlaying: false,
setPlayingVideo: this.setPlayingVideo
}
render() {
console.log('new _app.js defalt page');
const { Component, pageProps, router, state } = this.props
return (
<React.Fragment>
<VideoContext.Provider value={this.state}>
<PageTransition timeout={300} classNames="page-transition">
<Component {...pageProps} key={router.route} />
</PageTransition>
</VideoContext.Provider>
</React.Fragment>
)
}
}
export default MyApp
and then in one of my file I have put the Consumer:
import Layout from "../components/Layout";
import ReactPlayer from 'react-player
import VideoContext from '../components/videoplaying-context'
class Video extends React.Component {
constructor(props) {
super(props);
this.triggerVideo = this.triggerVideo.bind(this);
}
triggerVideo(event) {
console.log("click");
/* doing other stuff here... */
}
render() {
return (
<VideoContext.Consumer>
{context => (
<Layout>
<h1>Videos</h1>
<div>
<div className="group" id="process-video">
<div
className="poster-image"
onClick={() => {
this.triggerVideo.bind(this);
context.setPlayingVideo(true);
}}
/>
<ReactPlayer
url="https://vimeo.com/169599296"
width="640px"
height="640px"
config={{
vimeo: {
playerOptions: {
thumbnail_url: "http://placehold.it/640x640.jpg",
thumbnail_width: 640,
thumbnail_height: 640
}
}
}}
/>
</div>
</div>
<style jsx global>{`
.group {
position: relative;
height: 0;
overflow: hidden;
height: 640px;
width: 640px;
}
.poster-image {
background: url("http://placehold.it/640x640.jpg") center center;
background-size: cover;
bottom: 0;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 0;
z-index: 10;
height: 640px;
width: 640px;
transition: all 0.4s ease-in;
}
.poster-image + div {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 640px;
}
.poster-image.video--fadeout {
opacity: 0;
}
`}</style>
</Layout>
)}
</VideoContext.Consumer>
);
}
}
export default Video;
So, the function "context.setPlayingVideo(true)" is working fine and it's correctly setting the global state "videoPlaying" to true, but, after the introduction of the Context, "this.triggerVideo.bind(this);" is not working anymore because "this" is undefined.
I tried removing it and other stuff but I'm really stuck and I don't know hot to fix it.
Thanks everyone!
On this line you are not calling the method triggerVideo
onClick={() => { this.triggerVideo.bind(this); context.setPlayingVideo(true); }}
Change to:
onClick={() => { this.triggerVideo(); context.setPlayingVideo(true); }}
or to:
onClick={() => { this.triggerVideo.bind(this)(); context.setPlayingVideo(true); }}
I'm facing an issue with material-ui drawer. I've changed the width of the drawer container which causes a a problem . The drawer remains a little inside the page and visible but I don't want to make it visible on the page while I haven't clicked the button. It might be having an issue with the transform attribute now.
So I changed it to transform: translate(350px, 0px) but then I'm getting another issue, that is if I am clicking the button the drawer is not showing up. Any help on this thing ??
I have got the solution and edited the code.
I've created a Demo here => Have a look
Also shared the code below:
index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
constructor() {
super();
this.state = {
openDrawer: false
};
}
toggleDrawer() {
this.setState({
openDrawer: !this.state.openDrawer
});
}
render() {
return (
<MuiThemeProvider>
<div>
<button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
<Drawer
open={this.state.openDrawer}
containerClassName={!this.state.openDrawer? "hide-drawer": "show-drawer" }
openSecondary={true}
docked={true}
>
<div className="drawer-title-div">
<h4 className="drawer-title-text">It's my drawer</h4>
</div>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
render(<App />, document.getElementById('root'));
style.css
h1, p {
font-family: Lato;
}
.show-drawer {
top: 47px !important;
text-align: left !important;
width: 80% !important;
transform: translate(0%, 0px) !important;
}
.hide-drawer {
top: 47px !important;
text-align: left !important;
width: 80% !important;
transform: translate(100%, 0px) !important;
}
/* .drawer-side-drawer:focus {
top: 47px !important;
text-align: left !important;
width: 350px !important;
transform: translate(0px, 0px) !important;
} */
.drawer-title-div {
display: inline-block;
width: 100%;
background: #F2F8FB;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24);
}
.drawer-title-text {
display: inline-block;
margin-left: 16px;
margin-top: 16px;
margin-bottom: 16px;
color: #484848;
font-family: Muli;
font-size: 16px;
font-weight: 600;
}
For mui version 5, you have to use the PaperProps prop like so:
<Drawer
PaperProps={{
sx: { width: "90%" },
}}
>{...Child elements here}</Drawer>
you can simply add this to index.css
.MuiDrawer-paper {
width: 60% !important;
}
#media (max-width: 1200px) {
.MuiDrawer-paper {
width: 100% !important;
}
}
Just add PaperProps={{ style: { width: '25%' } }} to your MUI Drawer.
Most Probably it will work for everyone.
You can try adding a toggle class and you can get rid of the transform.
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
constructor() {
super();
this.state = {
openDrawer: false
};
}
toggleDrawer() {
this.setState({
openDrawer: !this.state.openDrawer
});
}
render() {
return (
<MuiThemeProvider>
<div>
<button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
<Drawer containerClassName={!this.state.openDrawer ? "hide-drawer": "show-drawer"}
open={this.state.openDrawer}
openSecondary={true}
docked={true}
>
<div className="drawer-title-div">
<h4 className="drawer-title-text">It's my drawer</h4>
</div>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
render(<App />, document.getElementById('root'));
You can use window.innerWidth as width: 100%:
<Drawer ...>
<div style={{width: window.innerWidth * 0.25}}>
...
</div>
</Drawer>
One way to solve this issue is by getting the parent width:
const parentRef = useRef<HTMLDivElement>(null);
<Box
ref={parentRef}
>
<Drawer
PaperProps={{
sx: {
width: parentRef?.current?.clientWidth || 0,
},
}}
// .... etc
</Drawer>
</Box>
One way to solve this issue is by getting the parent width:
const parentRef = useRef<HTMLDivElement>(null);
<Box
ref={parentRef}
>
<Drawer
PaperProps={{
sx: {
width: parentRef?.current?.clientWidth || 0,
},
}}
>
// content goes here
</Drawer>
</Box>
Drawer-Material-UI If you look at the link.. you will find Drawer properties..
width (union: string number) [default : null] The width of the Drawer in pixels or
percentage in string format ex. 50% to fill half of the window or 100%
and so on. Defaults to using the values from theme.
so just update the tag with width and you are good to go,
<Drawer width="50%"></Drawer>
Check it here..
The drawer width is not matching the theme drawer width which was causing the problem.. not the transform CSS attribute.
Just a different approach ^^
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Drawer from 'material-ui/Drawer';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Responsive from 'react-responsive-decorator'; // This decorator allows using the library as a decorator.
#Responsive
class App extends Component {
constructor() {
super();
this.state = {
openDrawer: false,
width:350
};
}
// Update for kinda media query thing
componentDidMount() {
this.props.media({ minWidth: 768 }, () => {
this.setState({
width: 350
});
});
this.props.media({ maxWidth: 768 }, () => {
this.setState({
width: 150
});
});
}
toggleDrawer() {
this.setState({
openDrawer: !this.state.openDrawer
});
}
render() {
return (
<MuiThemeProvider>
<div>
<button onClick={this.toggleDrawer.bind(this)}> Toggle Drawer</button>
<Drawer width={this.state.width} //<- Update
open={this.state.openDrawer}
containerClassName="drawer-side-drawer"
openSecondary={true}
docked={true}
>
<div className="drawer-title-div">
<h4 className="drawer-title-text">It's my drawer</h4>
</div>
</Drawer>
</div>
</MuiThemeProvider>
);
}
}
render(<App />, document.getElementById('root'));
I had the same problem.
you just have to add the PaperProps to your drawer