Material Bread
v0.2.10
Home
Getting Started
React Native
Web
Electron
MacOS
Windows
NextJs
Expo
Vue Native
Style
Font
Icons
Theme
Components
Appbar
Searchbar
Appbar Bottom
Avatar
Backdrop
Badge
Banner
Bottom Navigation
Bottom Navigation Item
Button
Card
CardActions
CardContent
CardHeader
CardMedia
Checkbox
Chip
DataTable
DataTableCell
DataTableHeader
DataTablePagination
DataTableRow
Dialog
Divider
Drawer
DrawerHeader
DrawerItem
DrawerSection
DrawerBottom
Fab
Speed dial
Icon
IconButton
List
ListExpand
ListItem
ListSection
Menu
MenuItem
Paper
Progress Bar
Progress Circle
Radio Button
Ripple
Select
SheetBottom
SheetSide
Slider
Snackbar
SwipeNav
Switch
Tabs
Tab
Textfield
Searchfield
ToggleButton
ToggleButtonGroup
Tooltip
Typography
Utils
Anchor
Color
Hoverable
Shadow
Storybook
Showcase
Contributing
Library
Docs
About

Ripple

Ripple adds animation feedback to interactions.

import { Ripple } from 'material-bread';

Component #

Ripple is a base component that can be used to add a ripple animation to anything on touch. You can change rippleDuration , rippleColor , rippleContainerBorderRadius , and much more.
Click Me
Click Me
Live Editing
class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        <Ripple
          rippleColor={'blue'}
          style={{
            width: 180,
            height: 250,
            justifyContent: 'center',
            alignItems: 'center',
            borderWidth: 1,
            borderColor: 'black',
            borderRadius: 5,
          }}>
          <Text>Click Me</Text>
        </Ripple>
        <Ripple style={{ width: 200, height: 200, marginLeft: 40 }}>
          <Card
            shadow={4}
            style={{
              width: 200,
              height: 200,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text>Click Me</Text>
          </Card>
        </Ripple>
      </View>
    );
  }
}

Usage #

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

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
      <View>
        <Ripple
          rippleColor={'blue'}
          style={{
            width: 180,
            height: 250,
            justifyContent: 'center',
            alignItems: 'center',
            borderWidth: 1,
            borderColor: 'black',
            borderRadius: 5,
          }}>
          <Text>Click Me</Text>
        </Ripple>
      </View>
    );
  }
}

Props #

Name
Description
Type
Default
displayUntilPressOut
Keep ripple at full size while holding press
bool
true
disabled
Disables ripple
bool
onPress
Call back on ripple
func
rippleCentered
Whether the ripple starts at the center of the component or where you clicked
bool
false
rippleColor
Color of ripple
string
rgba(0, 0, 0, .87)
rippleContainerBorderRadius
Border Radius of ripple
number
0
rippleDuration
Animation Duration of ripple to fill the entire component
duration
400
rippleOpacity
Opacity of ripple
number
0.3
rippleSize
Determines the size of ripple
number
0
rippleSequential
Ripple should start in sequence
bool
false
style
Styles root element
object

Demos #

You can see even more examples in the Storybook environment.

Centered #

This forces the ripple to start in the center no matter where you click
Click Me
Click Me
Live Editing
class DialogPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            <Ripple
                rippleColor={'blue'}
                rippleCentered
                style={{
                    width: 180,
                    height: 250,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderWidth: 1,
                    borderColor: 'black',
                    borderRadius: 5,
                }}>
                <Text>Click Me</Text>
            </Ripple>
            <Ripple
                rippleCentered
                style={{ width: 200, height: 200, marginLeft: 40 }}>
                <Card
                    shadow={4}
                    style={{
                    width: 200,
                    height: 200,
                    justifyContent: 'center',
                    alignItems: 'center',
                    }}>
                    <Text>Click Me</Text>
                </Card>
            </Ripple>
        </View>
    );
  }
}

Sequential #

This makes the next ripple wait until the current ripple is done.
Click Me
Click Me
Live Editing
class DialogPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            <Ripple
                rippleColor={'blue'}
                rippleSequential
                style={{
                    width: 180,
                    height: 250,
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderWidth: 1,
                    borderColor: 'black',
                    borderRadius: 5,
                }}>
                <Text>Click Me</Text>
            </Ripple>
            <Ripple
                rippleCentered
                rippleSequential
                style={{ width: 200, height: 200, marginLeft: 40 }}>
                <Card
                    shadow={4}
                    style={{
                    width: 200,
                    height: 200,
                    justifyContent: 'center',
                    alignItems: 'center',
                    }}>
                    <Text>Click Me</Text>
                </Card>
            </Ripple>
        </View>
    );
  }
}