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.
Related
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>
)
I work with buttons, and on click i need to change color button.
I have two button: favorite and stats, and onclick i need to change to custom color, for ex favorite is orange, stats blue.
How i can change color onclick?
<div className={classes.fotter_button}>
<button>
<FontAwesomeIcon
icon={faStar}
aria-hidden="true"
/>
</button>
<button>
<FontAwesomeIcon
icon={faChartBar}
aria-hidden="true"
/>
</button>
</div>
const [favorite,setFavorite]=useState(false)
const [stats,setStats]=useState(false)
<div className={classes.fotter_button}>
<button onClick={()=>{setFavorite(true)}} style={{backgroundColor:favorite==true?"orange":""}}>
<FontAwesomeIcon
icon={faStar}
aria-hidden="true"
/>
</button>
<button onClick={()=>{setStats(true)}} style={{backgroundColor:stats==true?"blue":""}}>
<FontAwesomeIcon
icon={faChartBar}
aria-hidden="true"
/>
</button>
</div>
One way is to add state variable in your component, and use a function to change the state variable between two values (true, false). Apply the button styling based on the value of the state variable.
const MyToggleButton = () => {
const [toggle, setToggle] = React.useState(false);
const toggleButton = () => setToggle(!toggle);
return (
<>
<button style={{backgroundColor: toggle ? '#FFF' : '#000'}} onClick={toggleButton}>Click Me</button>
</>
);
}
My example is pretty generic; if possible consider using a state variable that more aptly describes your buttons two states.
I have created a React component using Material UI as below
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handleToggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
In the above component i have MenuList and TextField. I tried to add onBlur={handleToggle} thinking that, it will close the component if clicked outside of it but its closing even when i am trying to add text in TextField using onChange={getStudent}, Why is it happening and how to close Component only if clicked outside of it? Thanks.
You can use ClickAwayListener component to detect whether the user is clicking outside of the Popover area.
<ClickAwayListener onClickAway={() => setOpen(false)}>
<span>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</span>
</ClickAwayListener>
Live Demo
I am trying to place two icons one is related to wordDocument and other is related to download icon on and button but one icon is overriding another icon, this is the code:
import { FileWordOutlined, DownloadOutlined } from '#ant-design/icons';
return (
<Fragment>
<Button
type="primary"
style={{ width: '30%' }}
onClick={() => {
authProvider.getIdToken().then(token => {
downloadFile(
`${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
token.idToken.rawIdToken
);
});
}}
icon={((<FileWordOutlined />), (<DownloadOutlined />))}
size="small"
>
Basis of Design
</Button>
</Fragment>
);
and the button image is looking like this right now
I am looking to place icon <FileWordOutlined /> on the right side of the text Basis of Design and <DownloadOutlined /> is on the left side of the text.
Could anyone please let me know is there any way to achieve this?
The icon props take only one component. So you won't be able to pass two-component there.
There are two ways to get 2 icons.
Remove the icon prop and use the 2 icon Component,for ex,<FileWordOutlined />, <DownloadOutlined /> as children to the Button prop.
<Button type="primary">
<FileWordOutlined />
Basis of Design
<DownloadOutlined />
</Button>
If you want to use the icon prop you use it like this:
<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
Basis of Design
<DownloadOutlined />
</Button>
What you are doing isn't working because you are setting icon to the returned value of ((<FileWordOutlined />), (<DownloadOutlined />)), which is <DownloadOutlined />.
You can omit icon and put the icons and the button text inside Button instead:
<Button
type="primary"
size="small"
>
<DownloadOutlined />
Basis of Design
<FileWordOutlined />
</Button>
demo
If you want to get 2 icons then create icon prop like this:
<Button icon={your primary icon}>
{text}
{extra icon}
</Button>
So the Element would look like
<My Button
icon={<icon name/>}
text={text}
extra icon={<extra icon name/>}
/>
I have the following problem: I am using iView as UI lib in our project, and I have to choose Button out of several same iView Button components inside dynamic component, what to pass to :is props of component. Here is an excerpt from my code:
<span class="top-buttons" v-if="showTopButtons">
<Button #click="selectAll">
<Icon type="android-remove-circle"></Icon>
Select All
</Button>
<component :is="???">
<Button #click="moveToDrafts">
<Icon type="android-cancel"></Icon>
Move to Drafts
</Button>
<Button #click="publish">
<Icon type="android-cancel"></Icon>
Publish
</Button>
<Button #click="publish">
<Icon type="android-cancel"></Icon>
Publish
</Button>
</component>
<Button #click="deleteTour">
<Icon type="trash-a"></Icon>
Delete
</Button>
</span>
:is prop should be passed a component
example:
<template>
<component v-bind:is="currentTabComponent"></component>
</template>
<script>
import currentTabComponent from './currentTabComponent';
export default {
components: {
currentTabComponent,
},
};
</script>
In you case, it's probably more suitable to use v-if instead
<Button #click="moveToDrafts" v-if="someCondition1">
<Icon type="android-cancel"></Icon>
Move to Drafts
</Button>
<Button #click="publish" v-else-if="someCondition2">
<Icon type="android-cancel"></Icon>
Publish
</Button>
<Button #click="publish" v-else>
<Icon type="android-cancel"></Icon>
Publish
</Button>