I'm trying to make a modal in React TypeScript and I can't figure out the exact type of a reference of a HTML dialog.
import { useRef } from 'react'
const Modal: React.FC = () => {
const modalRef = useRef<any>(null)
function openModal() {
modalRef.current.showModal()
}
function closeModal() {
modalRef.current.close()
}
return (
<div>
<button onClick={openModal}>Open<button/>
<dialog ref={modalRef}>
<h1>Title</h1>
<p>Info</p>
<button onClick={closeModal}>Close<button/>
</dialog>
<div/>
)
}
export default Modal
Could anyone help me figure out the right type I would put in place of any?
Most html components are just HTML${componentName}Element,
for example HTMLDivElement and in your case HTMLDialogElement
const modalRef = useRef<HTMLDialogElement>(null)
Related
I am new to reactJS and stuck in an issue. i have a button in header that needs to toggle a class 'show' in a menu which is in some other file. I tried to use global state but do not know how to do that. here is what i did;
LAYOUT FILE
import React, { useState } from "react";
// importing header / menu etc.
function LayoutHome({ children }) {
const [state, setState] = React.useState({ MsgMenu: 'messages-dropdown' });
const handleOpenMsgMenu = (e) => {
e?.preventDefault();
setState({MsgMenu:'messages-dropdown show'});
};
return (
<>
<Header handleOpenMsgMenu={handleOpenMsgMenu} />
<MessageMenu handleOpenMsgMenu={state.MsgMenu} />
{children}
<Footer />
</>
);
}
HEADER
import React, { useState } from "react";
function Header({handleOpenMsgMenu}) {
<button type="button" onClick={handleOpenMsgMenu} className="header-notification-btn">MENU</button >
}
MENU
import React, { useState } from "react";
function MessageMenu({handleOpenMsgMenu}) {
<div id="messages-dropdown" className={handleOpenMsgMenu}>
// CONTENT
</div>
}
To achieve this you can use useState hook to toggle the display of the Menu.
create a new toggle state in global and pass it onto the menu component.
below is the complete code.
import React from "react";
export default function App({children}) {
const [state, setState] = React.useState({ MsgMenu: 'messages-dropdown' });
const [toggle, setToggle] = React.useState(false);
const handleOpenMsgMenu = (e) => {
e?.preventDefault();
setToggle(!toggle);
};
return (
<>
<Header handleOpenMsgMenu={handleOpenMsgMenu} />
<MessageMenu handleOpenMsgMenu={state.MsgMenu} toggle={toggle} />
{children}
</>
);
}
// Header
import React from "react";
function Header({handleOpenMsgMenu}) {
return <button type="button" onClick={handleOpenMsgMenu} className="header-notification-btn">MENU</button >
}
// Menu
import React from "react";
function MessageMenu({handleOpenMsgMenu, toggle}) {
return <div id="messages-dropdown" style={{display: toggle?"block":"none"}}>
<ul>
<li>
{handleOpenMsgMenu}
</li>
</ul>
</div>
}
You can toggle state with !value and then change your class depending on that value
setMenu(() => {
return {
...menu,
show: !menu.show // toggle
};
});
I've made a sample here
For the global state, check out Context or Redux
I want to show message in material.ui by only call method not ading component to parent component (like toastify.js). So, I wrote example like below. But I couldn't call showSnack() method. How can I achieve this?
Note: I don't want add component to demo js like < SnackbarHelper />. I only want show snackbar calling by function.
CODESANDBOX LINK
Demo.js
import React from "react";
import Button from "#material-ui/core/Button";
import SnackHelper from "./snackHelper";
export default function PositionedSnackbar() {
function showMessage() {
console.log("I want call snackHelper.showSnack");
// snackHelper.showSnack();
}
return (
<div>
<Button variant="contained" onClick={() => showMessage()}>
SHOW MESSAGE
</Button>
</div>
);
}
snackbarHelper.js
import React from "react";
import Snackbar from "#material-ui/core/Snackbar";
export default function SnackHelper() {
const [state, setState] = React.useState({
open: false
});
const { vertical, horizontal, open } = state;
const showSnack = (newState) => () => {
setState({ open: true, ...newState });
};
const handleClose = () => {
setState({ ...state, open: false });
};
return (
<div>
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
onClose={handleClose}
message=""
key={vertical + horizontal}
/>
</div>
);
}
I found solution in this article for same thing what I was looking. Only difference is, this is for confirmation dialog and written by typescript. But, it can be easily changed to toast message by javascript. https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe
You can get working example code https://codesandbox.io/s/neat-dialogs-3h5ou?from-embed=&file=/src/ConfirmationService.tsx
im having this issue since i moved the code from React Javascript to React Typescript
I have this simple hook that switch state from on/off (or true false) (code below)
I'm struggling into this since this code were working on Javascript
Code here to test it
So the toggle function has some error but cannot figure it out. Some help would be much appreciated
// useToggle.tsx
import { useState } from "react";
export const useToggle = (initialMode = false) => {
const [open, setOpen] = useState(initialMode);
const toggle = () => setOpen(!open);
return [open, setOpen, toggle];
};
My switch component
// Switch.tsx
import { useToggle } from "./useToggle";
import React from "react";
export const Switch = () => {
const [open, toggle] = useToggle();
const [open2, toggle2] = useToggle();
return (
<>
<p>Testing toggle 1: {`${open}`}</p>
<p>Testing toggle 2: {`${open2}`}</p>
<button
onClick={() => {
toggle();
}}
>
Toggle 1
</button>
<button
onClick={() => {
toggle2();
}}
>
Toggle 2
</button>
</>
);
};
And now i use my switch component
// App.tsx
import * as React from "react";
import "./styles.css";
import { Switch } from "./Switch";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Switch />
</div>
);
}
Two changes you need to do to solve the problem
First, to get rid of the error you need to return the value with const assertion like
return [open, toggle, setOpen] as const;
Here is a Link to github issue for the error
and secondly you are using toggle as the second argument while destructing, so you need to return it as the second argument too
Working DEMO
I've got a few React functional Components that I would like to share a state. In this example two toggle buttons that would conditionally show/hide a searchbar and a navbar.
--Solution, based on the accepted answer, on the bottom--
I'm completely new to useContext() and I keep running into the following error in the console:
Uncaught TypeError: setSearchbarToggle is not a function This goes for both buttons.
Bellow I have a filtered example code. It is just for the example I use the states in one file. In real life I would re-use the states in multiple functional components.
This is my header.js
import React, { useState, useContext } from "react"
import "./header.sass"
import { Context } from "./HeaderContext"
export const Header = () => {
const headerContext = useContext(Context)
const { navbarToggle, setNavbarToggle, searchbarToggle, setSearchbarToggle } = headerContext
return (
<React.Fragment>
<div className={"sticky-top"}>
<button onClick={ () => setNavbarToggle( !navbarToggle )}> Toggle Menu </button>
<button onClick={ () => setSearchbarToggle( !searchbarToggle )}> Toggle Search </button>
{navbarToggle && <h3>Menu is showing</h3>}
{searchbarToggle && <h3>Searchbar is showing</h3>}
</div>
</React.Fragment>
)
}
export default Header
And this is my HeaderContext.jsx
import React, { createContext, useState } from "react";
import PropTypes from "prop-types";
export const Context = createContext({});
export const Provider = props => {
const {
navbarToggle: initialNavBarToggle,
searchbarToggle: initialSarchbarToggle,
children
} = props;
const [navbarToggle, setNavbarToggle] = useState(initialNavBarToggle);
const [searchbarToggle, setSearchbarToggle] = useState(initialSarchbarToggle);
const headerContext = {
navbarToggle, setNavbarToggle,
searchbarToggle, setSearchbarToggle
};
return <Context.Provider value={headerContext}>{children}</Context.Provider>;
};
export const { Consumer } = Context;
Provider.propTypes = {
navbarToggle: PropTypes.bool,
searchbarToggle: PropTypes.bool
};
Provider.defaultProps = {
navbarToggle: false,
searchbarToggle: false
};
I hope you can shed some light on this for me
--edit--
This is my code based on the accepted answer.
import React, { useContext } from "react"
import { Provider,Context } from "./HeaderContext"
export const HeaderWithContext= () => {
const headerContext = useContext(Context)
const { navbarToggle, setNavbarToggle, searchbarToggle, setSearchbarToggle } = headerContext
return (
<React.Fragment>
<div className={"sticky-top"}>
<button onClick={ () => setNavbarToggle( !navbarToggle )}> Toggle Menu </button>
<button onClick={ () => setSearchbarToggle( !searchbarToggle )}> Toggle Search </button>
{navbarToggle && <h3>Menu is showing</h3>}
{searchbarToggle && <h3>Searchbar is showing</h3>}
</div>
</React.Fragment>
)
}
export const Header = () => {
return (
<Provider>
<HeaderWithContext/>
</Provider>
)
};
One of the parent components, e.g. App, must wrap the header (or one of its ancestor components) with Context.Provider:
import { Provider } from "./HeaderContext"
...
<Provider>
<Header />
</Provider>
I have a video tag () in my webpage, and a "play/pause" button that when the user clicks on it, the video starts/stops playing . How can I do so in react if I'm not allowed to use js in order to call "getElementById" and then to use play()/pause() build-in methods.
Any idea?
Updated example for React Function Components:
import React, { useRef} from 'react'
function myComponent(props) {
const vidRef = useRef(null);
const handlePlayVideo = () => {
vidRef.current.play();
}
return (
<video ref={vidRef}>
<source src={[YOUR_SOURCE]} type="video/mp4" />
</video>
)
}
The most straightforward way would be to use refs which is a React feature that will let you invoke methods on the component instances that you have returned from a render().
You can read up a little more on them in the docs: https://facebook.github.io/react/docs/more-about-refs.html
In this case just add a ref string to your video tag like so:
<video ref="vidRef" src="some.mp4" type="video/mp4"></video>
That way when you add click handlers to your buttons:
<button onClick={this.playVideo.bind(this)}>PLAY</button>
The playVideo method will have access to your video reference through refs:
playVideo() {
this.refs.vidRef.play();
}
Here is a working DEMO so you can check out a full example.
Accepted answer was using old react style, if you want to do with ES6
A simple component to auto play pause along with manual controls playing Polestar intro:
import React from "react";
class Video extends React.Component {
componentDidMount = () => {
this.playVideo();
};
componentWillUnmount = () => {
this.pauseVideo();
};
playVideo = () => {
// You can use the play method as normal on your video ref
this.refs.vidRef.play();
};
pauseVideo = () => {
// Pause as well
this.refs.vidRef.pause();
};
render = () => {
return (
<div>
<video
ref="vidRef"
src="https://assets.polestar.com/video/test/polestar-1_09.mp4"
type="video/mp4"
/>
<div>
<button onClick={this.playVideo}>
Play!
</button>
<button onClick={this.pauseVideo}>
Pause!
</button>
</div>
</div>
);
};
}
export default Video;
Video from https://www.polestar.com/cars/polestar-1
This answer adds to #mheavers, which I upvoted.
There are a few differences:
One can pass noControls as a prop to the Video component, and apply the click event only if the <video> doesn't have the default controls (which will be the case when noControls is passed).
The handler function is a toggler; enabling one to play or pause according to its current state.
One can create a play button overlay style through the class video__play-button, whilst the same handler hides it through the class is-playing.
It also shows how to use two or more ref and pass them as a parameter to a pure render function.
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
const renderVideo = ({
noControls,
src,
vidButtonRef,
vidRef,
handleToggleVideo,
}) => (
<>
{noControls ? (
<div ref={vidButtonRef} className="video video__play-button">
<video
ref={vidRef}
src={src}
onClick={handleToggleVideo}
></video>
</div>
) : (
<video
src={src}
controls
controlsList="nodownload"
></video>
)}
</>
);
const Video = props => {
const vidRef = useRef(null);
const vidButtonRef = useRef(null);
const { noControls, src } = props;
const handlePlay = () => {
vidRef.current.play();
// hide overlay play button styles, set by 'video__play-button'
vidButtonRef.current.classList.add('is-playing');
};
const handlePause = () => {
vidRef.current.pause();
// show overlay play button styles, set by 'video__play-button'
vidButtonRef.current.classList.remove('is-playing');
};
const handleToggleVideo = () => (vidRef.current.paused ? handlePlay() : handlePause());
return (
<>
{renderVideo({
noControls,
src,
vidButtonRef,
vidRef,
handleToggleVideo,
})}
</>
);
};
Video.propTypes = {
noControls: PropTypes.bool,
videoUrl: PropTypes.string,
};
export default Video;
Use ref attribute to create a link to the video and using that reference we can able to use video controls on the video component
Try this code,
import React from "react";
class VideoDemo extends React.Component {
getVideo = elem => {
this.video = elem
}
playVideo = () => {
this.video.play()
};
pauseVideo = () => {
this.video.pause();
};
render = () => {
return (
<div>
<video
ref={this.getVideo}
src="http://techslides.com/demos/sample-videos/small.mp4"
type="video/mp4"
/>
<div>
<button onClick={this.playVideo}>
Play!
</button>
<button onClick={this.pauseVideo}>
Pause!
</button>
</div>
</div>
);
};
}
export default VideoDemo;
import React, { useRef, useState } from 'react';
export const Video = () => {
const videoRef = useRef();
const [stop, setStop] = useState(false);
const handleVideo = () => {
setStop(!stop);
if (stop === true) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
};
return (
<div onClick={handleVideo}>
<video ref={videoRef} poster={HeroImg} controls>
<source src={coverVideo} type="video/mp4" />
</video>
</div>
);
};