Ripple

This example shows how to wrap a component with another component using JSX Middlewares. It implements a $ripple directive, which adds a ripple effect to all buttons in the app, and also all components that have $ripple prop set to true. $ripple property can be set to false to disable ripple effect on buttons.

function rippleMiddleware(next, type, { $ripple, ...props }, key) {
  if ($ripple || (type === 'button' && $ripple !== false)) {
    return <Ripple>{next(type, props, key)}</Ripple>;
  }

  return next(type, props, key);
}

Visit the source code of this example to see the full implementation.

Usage

function App() {
  return (
    <div>
      <button>Click to see ripple</button>

      <button $ripple={false}>This doesn't have ripple though</button>

      <div $ripple style={{ height: 60, border: '1px solid black' }}>
        Custom element with ripple
      </div>
    </div>
  );
}

http://localhost:3000

Custom element with ripple

Typescript types

declare module 'react' {
  interface Attributes {
    $ripple?: boolean;
  }
}