useRipple

Returns a function that shows a ripple effect on the dashboard, the same effect shown when clicking a widget with an action. Use it to give users visual feedback when they trigger an action from a widget. See In-depth: Actions.

function useRipple(): (x: number, y: number) => void

Returns

A function that shows a ripple at the given position. The position is relative to the viewport, as provided by clientX and clientY of mouse events.

Example

src/widgets/example/Example.tsx

import React from 'react'
import {useActionField, useRipple} from '@modbros/dashboard-sdk'

export default function Example() {
  const execute = useActionField({field: 'action'})
  const ripple = useRipple()

  return (
    <button
      style={{width: '100%', height: '100%'}}
      onClick={(event) => {
        ripple(event.clientX, event.clientY)
        execute()
      }}
    >
      Run action
    </button>
  )
}