CODEWITHSUNDEEP
typescriptoffice-ui-fabric
Kaarlo Räihä
Kaarlo Räihä

Reputation: 114

How should be hover effects be done with Office UI Fabric?

What is the right way to do hover (move mouse over something) effects with Office UI Fabric?

e.g. I have a button and if I move mouse over it, the text should change from "Button" -> "Hovered"?

<DefaultButton
            data-automation-id="test"
            text="Button"
          />

or I have button with icon and I want to change the icon to another one when hover happens?

<DefaultButton iconProps={{ iconName: 'Pin' }}>Text</DefaultButton>;

Upvotes: 0

Views: 3077

Answers (1)

Mike Wheaton
Mike Wheaton

Reputation: 502

To change the text of a button on hover, you'll have to first move the button text into the parent component's state:

class App extends React.Component<any, any> {
  state = {
    buttonText: "Button"
  };

  render() {
    const { buttonText } = this.state;

    return (
      <Fabric>
        <h1>Change text on hover</h1>
        <DefaultButton text={buttonText} />
      </Fabric>
    );
  }

  ...

You can then add a function to change the button text:

onHover = () => {
  this.setState({
    buttonText: "Hovering!"
  });
};

And connect it to the onMouseOver prop of the button:

<DefaultButton text={buttonText} onMouseOver={this.onHover} />

When you hover over the button it will trigger the onHover function, setting a new value for buttonText. React will then re-render the component and send this text to DefaultButton.

You can see it in action in this CodeSandbox: https://codesandbox.io/s/7zpkz3nr8x

Upvotes: 2

Related Questions