I want to remove the outlined variant at the small medium and down breakpoint. To do this, I have tried to do the following:
const variantType = theme.breakpoints.down('md') ? '' : 'outlined';
<Button name="buyFood" variant={variantType} onClick={this.openFoodModal}>
Buy
</Button>;
This does not do the job. I have tried researching and no one seemed to ask this question before. So here is the first of its kind. lol
You can do this by using the useTheme and the useMediaQuery hooks from Material UI.
import { Button, useTheme, useMediaQuery } from '#material-ui/core'
export default function App() {
const theme = useTheme();
const mediumDown = useMediaQuery(theme.breakpoints.down('md'));
return (
<div className="App">
<Button name="buyFood" variant={mediumDown? 'text' : 'outlined' } onClick={this.openFoodModal}>
Smart Suggest
</Button>
</div>
);
}
You can access your theme settings with the useTheme hook if you have custom theme.
After that you only have to compare the current window width with your breakpoint.
To do this you can simply write a hook that gives you the current window width.
Here is an elegant solution from #QoP
This could then look like this:
./App.js
import React from "react";
import { useTheme } from "#material-ui/core/styles";
import { Button } from "#material-ui/core";
import useWindowWidth from "./useWindowWidth";
export default function App() {
const theme = useTheme();
const width = useWindowWidth();
const variantType = width < theme.breakpoints.values.md ? "text" : "outlined";
return (
<div className="App">
<Button name="buyFood" variant={variantType} onClick={this.openFoodModal}>
Smart Suggest
</Button>
</div>
);
}
./useWindowWidth.js
import { useState, useEffect } from "react";
const getWindowWidth = () => window.innerWidth;
export default function useWindowWidth() {
const [windowWidth, setWindowWidth] = useState(getWindowWidth());
useEffect(() => {
function handleResize() {
setWindowWidth(getWindowWidth());
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowWidth;
}
Live demo:
Related
I have created a counter app in React js using context api for global state management .
But the problem is when i am clicking increase and decrease button it is not updating global values .
I am new to react , please provide guidance what is going wrong here .
ContextFile :
import {createContext,useState} from 'react';
export const DataContext = createContext({
data:0,
increase : () => {},
decrease : () => {}
});
function DataContextProvider(props){
const [data,setData] = useState();
const increase = () => {
setData(data + 1);
}
const decrease = () => {
setData(data - 1);
}
return(
<DataContext.Provider value={{data,increase,decrease}}>
{props.children}
</DataContext.Provider>
);
};
export default DataContextProvider;
App.js :
import React,{useContext} from 'react';
import {DataContext} from './Context/dataContext';
import DataContextProvider from './Context/dataContext';
import IncreaseBtn from './Component/Increase';
import DecreaseBtn from './Component/Decrease';
const App = () => {
const {data} = useContext(DataContext);
return(
<>
<DataContextProvider>
{data}
<br/>
<br/>
<IncreaseBtn />
<br/>
<br/>
<DecreaseBtn />
</DataContextProvider>
</>
)
}
export default App;
Increase Button Component :
import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';
const IncreaseBtn = () => {
const {increase} = useContext(DataContext);
return(
<>
<button onClick={increase}> Increase </button>
</>
)
}
export default IncreaseBtn;
Decrease Button Component :
import React,{useContext} from 'react';
import {DataContext} from '../Context/dataContext';
const DecreaseBtn = () => {
const {decrease} = useContext(DataContext);
return(
<>
<button onClick={decrease}> Decrease </button>
</>
)
}
export default DecreaseBtn;
Folder Structure :
If you want to use context you should wrap your provider around those components, but here App component isn't wrapped but to its children 😉
Give an initial state of some "number" as it would be undefined and it gives NaN if you do the arithmetic operations with it.
Updated the sandbox for your ref
You are updating the state in the wrong way
Try:
setCount(count => count + 1);
SOLUTION JAVASCRIPT:
How create to Build a “like button” component using React 16. The component should be the default export (use export default).
Click here image
Personally, I prefer to use functional components instead of using class-based components. One solution to your problem could be the following code.
import React, { useState } from 'react';
const LikeButton = () => {
const [likes, setLikes] = useState(100);
const [isClicked, setIsClicked] = useState(false);
const handleClick = () => {
if (isClicked) {
setLikes(likes - 1);
} else {
setLikes(likes + 1);
}
setIsClicked(!isClicked);
};
return (
<button className={ `like-button ${isClicked && 'liked'}` } onClick={ handleClick }>
<span className="likes-counter">{ `Like | ${likes}` }</span>
</button>
);
};
export default LikeButton;
I have a button outside of React Video Player in my project and I should implement the following logic: when we click on this button, we get a full screen for the video. Here's the simplified example of the code that I'm trying to use which is not working. What do I do wrong? :) Thanks for help in advance
import "./styles.css";
import React, { useState, useEffect } from "react";
import ReactPlayer from "react-player";
export default function App() {
const [vidRef, setVidRef] = useState(null);
const setVideoToFullScreen = () => {
const el = vidRef.current;
console.log(el);
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
}
};
useEffect(() => {
setVidRef(document.querySelector(".react-player"));
}, []);
return (
<div className="App">
<button onClick={setVideoToFullScreen}>Full Screen</button>
<ReactPlayer
className="react-player"
controls
ref={vidRef}
url="https://www.youtube.com/watch?v=OIFASfPkw9g"
/>
</div>
);
}
I want to make a draggable modal from scratch. Found this tutorial on youtube but it's still using static HTML and vanilla javascript. Tried to use useRef & useEffect on React but I found when clicking the element that using onDrag event inside onMouseDown will only trigger onMouseDown.
The code in vanilla javascript
header.addEventListener("mousedown", () => {
header.classList.add("active");
header.addEventListener("mousemove", onDrag);
});
Code in React
import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { ModalStyled } from './ModalComponentStyled'
import { ReactComponent as DragIconSVG } from '../../images/drag-icon.svg'
const modalRoot = document.getElementById('modal')
const ModalComponent = ({ close, children, zIndexProps }) => {
let modalWrapper = undefined
const modalRef = useRef()
const moveRef = useRef()
useEffect(() => {
modalWrapper = window.getComputedStyle(modalRef.current)
}, [modalRef])
const dragModalHandler = (e) => {
// const left = parseInt(modalWrapper.left)
// const top = parseInt(modalWrapper.top)
// modalRef.current.style.left = `${left + movementX}px`
// modalRef.current.style.top = `${top + movementY}px`
console.log(e)
}
const mouseDownModalHandler = (e) => {
dragModalHandler(e)
}
return ReactDOM.createPortal(
<ModalStyled zIndexProps={zIndexProps}>
<div className="overlay" onClick={close}></div>
<div ref={modalRef} className="modal-container">
<div className="modal-children">
{children}
<div
className="drag"
ref={moveRef}
onMouseDown={mouseDownModalHandler}
onDrag={dragModalHandler}
>
<DragIconSVG />
</div>
</div>
</div>
</ModalStyled>,
modalRoot
)
I've converted the static vanilla code to sandbox so you guys can see clearly about my context.
https://codesandbox.io/s/draggablediv-pm33s
Got this solution using useState only
https://codesandbox.io/s/draggablemodalreact-7gp38
struggling to with react contexts being used with functional components. I feel like I'm doing everything right here, so any help would be much appreciated.
First I define a context (HeaderHoverContext.js)
import React, { createContext, useState } from "react";
export const HeaderHoverContext = createContext();
export function HeaderHoverProvider(props) {
const [currentHover, setHover] = useState(false);
const toggleHover = (e) => {
setHover(true);
}
return (
<HeaderHoverContext.Provider value={{currentHover, toggleHover}}>
{props.children}
</HeaderHoverContext.Provider>
);
}
I wrap the provider within my header (Header.js)
import React, { Component, useContext } from 'react'
import './header.css'
import Headerbutton from './Headerbutton';
import Hoverviewcontainer from './Hoverviewcontainer'
import {HeaderHoverProvider} from './contexts/HeaderHoverContext'
export default function Header() {
return (
<div className='header'>
<div className='header-right'>
<HeaderHoverProvider>
<Headerbutton text="Misc1" id="misc1" />
<Headerbutton text="Misc2" id="misc2" />
<Hoverviewcontainer id="misc3"/>
<Hoverviewcontainer id="misc4"/>
</HeaderHoverProvider>
</div>
</div>
);
}
Any then lastly, I try to retrieve the context using the useContext hook, but sadly its undefined.
import React, { useContext } from 'react'
import { HeaderHoverContext } from "./contexts/HeaderHoverContext";
export default function Hoverviewcontainer(props) {
const { isHover, setHover } = useContext(HeaderHoverContext);
// Returns undefined
console.log(`Current hover value is ${isHover}`)
return (
<div className={props.isHover ? 'hidden' : 'nothidden'} onMouseEnter={setHover}>
<div className="caret" id={props.id}/>
</div>
)
}
Any ideas what I might be missing here?
The fields in your context aren't called isHover and setHover, they are called currentHover and toggleHover, so either use them in the destructor or destruct manually:
const context = useContext(HeaderHoverContext);
const isHover = context.currentHover;
const setHover = context.toggleHover;
By the way, your toggle hover has a bug, never sets it to false. Try this instead:
const toggleHover = () => setHover(current => !current);