Back to Polythene Ripple main page

Ripple component for React

• Options
• Usage
• Variations
• Appearance
  • Styling
    • Themed component
    • CSS
    • Style
  • Dark or light tone

Options

Ripple options

Usage

Append a ripple to any HTML element (which requires to have style position: relative and a size):

import React from "react"
import { Ripple } from "polythene-react"

<div
  style={{
    position: "relative",
    width: "400px",
    height: "200px"
  }}
/>
  <Ripple />  
</div>

Use option after to append a Ripple to a Polythene component:

import React from "react"
import { Ripple, ListTile } from "polythene-react"

<ListTile
  title="Title"
  after={<Ripple/>}
/>

Variations

Create multiple simultaneous ripples with option multi.

Appearance

Styling

Below are examples how to change the Ripple appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { RippleCSS } from "polythene-css"

RippleCSS.addStyle(".themed-ripple", {
  color_light:   "#F44336"
})

h(Ripple, {
  className: "themed-ripple"
})

CSS

Change CSS using the Ripple CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/ripple"

By default the inherited color from the parent element is used. It can be changed with CSS:

.pe-ripple {
  color: green;
}

Style

Some style attributes can be set using option style. For example:

<Ripple
  style={{
    color: "#2196F3"
  }}
/>

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set