React Spotlight

Basic example

Renders a spotlight at x: 350px y: 25px

// At top of file
import Spotlight from 'react-spotlight';

// In render method
<Spotlight x={350} y={25} />

With all props

Renders a spotlight at x: 50% y: 25%. You can add text content inside the circle, but you'll have to style it yourself.

<Spotlight
  x={50}
  y={25}
  color="#d74793"
  radius={100}
  responsive
  usePercentage
  animSpeed={1000}
  borderColor="#ddd"
  borderWidth={5}>
  <div style={{
    position: 'absolute',
    left: '50%',
    top: '-50px',
    transform: 'translate(-50%, -100%)',
    whiteSpace: 'nowrap'
  }}>
    <div>Text content</div>
  </div>
</Spotlight>

Animating

You can change the x / y / scale variables dynamically and the spotlight will animate to the new size and position. Avoid animating radius, because this will be laggy.