Hoverable

Hoverable is a utility to add changes on hover.

import { Hoverable } from 'material-bread';

Wrap a component in Hoverable and activate a change when the user hovers over a component. On desktop it will activate on hover on mobile it will activate on touch.

Live Editing

class Demo extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        color: '#009688'
      }
    }
  
    handleHover(toggle) {
      this.setState({ color: toggle ? '#00BCD4' : '#009688' });
    }
  
    render() {
      return (
        <Hoverable
          onHoverIn={() => this.handleHover(true)}
          onHoverOut={() => this.handleHover(false)}
        >
          <View style={{width: 200, height: 125, backgroundColor: this.state.color}} />
        </Hoverable>
      );
    }
  }

import React, { Component } from 'react';
import { View } from 'react-native';
import { Hoverable } from 'material-bread';

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      color: '#009688'
    }
  }

    handleHover(toggle) {
        this.setState({ color: toggle ? '#00BCD4' : '#009688' });
    }

  render() {
    return (
      <Hoverable
        onHoverIn={() => this.handleHover(true)}
        onHoverOut={() => this.handleHover(false)}
      >
        <View style={{width: 200, height: 125, backgroundColor: this.state.color}} />
    </Hoverable>
    );
  }

Name

Description

Type

Default

onHoverIn

Call back when mouse enters component

func

onHoverOut

Call back when mouse leaves component

func

You can see even more examples in the Storybook environment.

Live Editing

class Demo extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        rotate: new Animated.Value(0)
      }
    }

    toggleAnimation(state) {
      const value = state ? 1 : 0;
      Animated.timing(this.state.rotate, {
        toValue: value,
        duration: 500,
      }).start();
    }
  
  
    render() {
      return (
        <Hoverable
          onHoverIn={() => this.toggleAnimation(true)}
          onHoverOut={() => this.toggleAnimation(false)}
          >
          <Animated.View
            style={{
              width: 125,
              height: 125,
              backgroundColor: '#E91E63',
              transform: [
                {
                  rotate: this.state.rotate.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['0deg', '360deg'],
                  }),
                },
              ],
            }}
          />
        </Hoverable>
      );
    }
  }

Hoverable

Component #

Usage #

Props #

Demos #

Animated #