I´m at a bit of a loss. I´m fairly new at React. I have a background video which is playing through React.Player and I want to change the URL of it (they are local files in the project) while I hover the button.
I managed to change the url with the use of useState when I click the button with the onClick function. However, whileHover is not working for me :/ can someone help me out?
const [text, setText] = useState("videos/planet.mp4")
return (
<div
<div>
<Button whileHover={() => setText("videos/Transition.mp4")} >
"testbutton"
</Button>
</div>
<motion.div class="react-player.full">
<ReactPlayer
url={text}
width="120%"
height="120%"
playing="true"
loop="true"
align="center"
/>
</motion.div>
</div>
)
That´s not the whole code, just these two important things.
EDIT
solved it by adding a motion.wrapper around the button.
Use onMouseEnter and onMouseLeave
const [text, setText] = useState("videos/planet.mp4")
return (
<div
<div >
<Button
onMouseEnter={() => setText("videos/Transition.mp4")}
onMouseLeave={() => setText("videos/planet.mp4")} >
"testbutton"
</Button>
</div>
<motion.div class="react-player.full" >
<ReactPlayer
url={text}
width="120%"
height="120%"
playing="true"
loop="true"
align="center"
/>
</motion.div>
</div>
)
Related
In my project, I am trying to add and preview video using video tag. But here I am facing a problem "Not allowed to load local source: file:///C:/fakepath/test-video.mp4". When I search for some solutions, it suggested changing the browser settings. But I wish to find a solution without changing any browser settings.
Also how to get the exact file path?, if I got the correct path is that enough to fix this problem?
...
const [videofile, setVideo] = useState("");
...
const onChange = (e: any) => {
setTemp(true);
console.log("event inside onchange", e);
const a = e.target.value;
console.log("video file", a);
setVideo(a);
};
...
return (
<div>
<div style={{ width: "100%" }}>
<div className="container p-0">
{temp ? (
<video controls src={videofile} />
) : (
<div className={styles.uploadBlock}>
{edit ? (
<img src={"#"} />
) : (
<>
<div className={styles.multimediaBox}>
<span className={styles.iconBox}>
<FontAwesomeIcon icon={faCirclePlay} />
</span>
</div>
</>
)}
</div>
)}
</div>
<div className={styles.btnGroup}>
<Button
className="secondary-button"
variant="contained"
component="label"
onChange={onChange}
>
{buttonLabel}
<input hidden accept="video/*" type="file" />
</Button>
....
Please give me a suggestion to fix this problem.
I have a draggable context menu with three rows and three TextInputs. Right now I have two bugs:
When "tab" is hit, the menu closes
Even when I stop "tab" from closing (I return in the handleClose), "tab" doesn't focus the cursor to the next TextInput.
I've tried adding tabIndex={0} to the three divs that surround each TextInput, but this didn't help with the tab issue.
Does anyone know what might be wrong here?
Below is the simplified code (variables such as startNumber, endNumber, comments are state variables).
const handleClose = (event?, reason?) => {
if (reason && reason === 'tabKeyDown') {
// Prevent the 'Tab' key from closing the window
return;
}
setShouldOpen(false);
otherStuffHere();
}
...
return (
<Draggable cancel="textarea">
<Menu
open={shouldOpen}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={{ top: y, left: x }}
className={classes.myContextMenu}
>
<div className={classes.row}>
<div className={classes.title}>
<Text>First number</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={startNumber}
disabled={readOnly}
onChange={handleStartNumberChange}
/>
</div>
</div>
<div className={classes.row}>
<div className={classes.title}>
<Text>End number</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={endNumber}
disabled={readOnly}
onChange={handleEndNumberChange}
/>
</div>
</div>
<div className={classes.row}>
<div className={classes.title}>
<Text>Comments</Text>
</div>
<div className={classes.text} tabIndex={0}>
<TextInput
fullWidth
value={comments}
disabled={readOnly}
onChange={handleCommentsChange}
/>
</div>
</div>
</Menu>
</Draggable>
)
I wasn't able to find a solution while still using the Menu component, but I used the Popover component instead.
Using the same CSS and same everything else, I got the tab to work as intended without changing the UI.
I have a react component which contains a 3D animation with playback controls (pause/play) inside a HTML page and I need the controls to be synced with some buttons outside the react component.
The controls in react are implemented like this
<Button color='red' onClick={() => { setDataPlayback(false); }} > <Icon name='pause' /></Button>
<Button color='red' onClick={() => { setDataPlayback(true); }} > <Icon name='play' /> </Button>
and the buttons in the html page are
<div id="btns">
<button id="html-button-pause" onclick="python_function_pause()"></button>
<button id="html-button-play" onclick="python_function_play()"></button>
</div>
So whenever I press a button in react, I want it to trigger a click on the html button.
I think this should work:
<Button color='red' onClick={() => { setDataPlayback(false); python_function_pause(); }} > <Icon name='pause' />
And the same for the other button. You can invoke click of an HTML element programmatically using .click() function. You can read more about it here.
I'm incredibly new to react and web development in general and I wanted to start by making a very simple shopping cart app. I found a nice tutorial on youtube for it, and am now trying to expand on it a bit. I wanted to add a search bar that filters out elements on the home-page as you type in it.
const Home = (props) => {
function handleChange(e){
console.log(e.target.value);
}
return (
<div>
<Row align="middle" className='title'> **search bar**
<Input placeholder="Search for a school" onChange={handleChange} />
</Row>
<Row align="middle" className='title'>
<Divider orientation="left"><b>Category E Schools</b></Divider>
</Row>
<Row align="middle" className='container'>
**Every item for sale is in a Col element**
<Col className = "Princeton University" xs={0} md={11} align="left">
<div className='image'>
<img src={Princeton} alt="Princeton University" />
<h3>Princeton</h3>
<h3>$1100.00</h3>
<button onClick={() => props.addBasket('princeton')} className='addToCart cart1' href='#'>Add to Cart</button>
</div>
</Col>
I'm using AntDesign Row-Col components, and my thought was to define a className for each Col. I was hoping that with the className I could implement the handleChange function to directly remove elements whose classNames don't contain the letters typed into the input bar. Sorry for the beginner-level work going on here.
Pat of the genius of react is that you can abstract your components and render them dynamically. to do this I would create a reusable component for all items and then render them dynamically.
Example:
first create an item component
const Item = (props) => (
<Col className = "Princeton University" xs={0} md={11} align="left">
<div className='image'>
<img src={props.image} alt={props.title} />
<h3>{props.title}</h3>
<h3>{props.cost}</h3>
<button onClick={() => props.addBasket('princeton')} className='addToCart cart1' href='#'>Add to Cart</button>
</div>
</Col>
)
}
add your items to state and render your state dynamically
also here I added state to search and set up two way binding between my input and my state value
i also added the filter method to my dynamic rendering of the items
i would recommend adding a library like loadash and using the debounce function so that the results re-render once 350ms after the user finishes typing instead of re-rendering on every single keystroke from the user
const Home = (props) => {
const [items, setItems] = useState([
{name: Princeton, price: 140000.00, img: http:princetonimages.com/f313b},
])
const [search, setSearch] = useState('')
const renderItems = (items) => (items.map(item => <Item {...item} />))
return (
<div>
<Row align="middle" className='title'> **search bar**
<Input
placeholder="Search for a school"
onChange={(e) => setSearch(e.target.value)}
value={search}
/>
</Row>
<Row align="middle" className='title'>
<Divider orientation="left"><b>Category E Schools</b></Divider>
</Row>
<Row align="middle" className='container'>
{renderItems(state.items.filter(search))}
</Row>
)
}
I have an image in the center of my screen and have found a way to use button to change the image, but I want to create a dropdown menu instead so it looks neater. I'm fairly new to React so I'm looking a lot of things up and finding it a bit hard to understand.. this is the following code I have
const setImage = () =>{
const [selected, setSelected] = useState(assets.apple)
return(
<div className="Fruits">
<img src={selected} alt='image.png' />
<div className="FruitOptions">
<button onClick={() => setSelected(assets.apple)}>apple</button>
<button onClick={() => setSelected(assets.orange)}>orange</button>
<button onClick={() => setSelected(assets.watermelon)}>watermelon</button>
</div>
</div>
)
}
I found this in the react bootstrap docs and wasn't sure if this would be a proper way to do it..
<DropdownButton id="dropdown-basic-button" title="Dropdown button">
<Dropdown.Item onClick={() => setSelected(assets.apples)}>apples</Dropdown.Item>
<Dropdown.Item onClick={() => setSelected(assets.orange)}>oranges</Dropdown.Item>
<Dropdown.Item onClick={() => setSelected(assets.watermelons)}>watermelons</Dropdown.Item>
</DropdownButton>
It's a good way to achieve it, but i prefer to use the Ant-Design, you can find more information in https://ant.design/.