react-smooth-cursor

Smooth cursor library

Preview

Try it

Install

yarn add react-smooth-cursor

or

npm install react-smooth-cursor

Usage

import React, { Component } from 'react'

import SmoothCursor from 'react-smooth-cursor'
import 'react-smooth-cursor/dist/index.css'

class Example extends Component {
  render() {
    (
    return
    <SmoothCursor
      // Required
      selectors={['antValidCssSelector01','antValidCssSelector02']}
      // Optionals
      fillColor='#e20c6a'
      strokeColor='#000'
      strokeWidth={1}
      cursorRadius={25}
    />
    )
  }
}

// or

const Example = () => {
  return(
  <SmoothCursor
    // Required
    selectors={['antValidCssSelector01','antValidCssSelector02']}
    // Optionals
    fillColor='#e20c6a'
    strokeColor='#000'
    strokeWidth={1}
    cursorRadius={25}
  />
  )
}

General Props

Option	Type	Description	Default
selectors	string[ ]	Anys valid css selectors list which cursor will be animated on	undefined
shape	string	Shape of cursor ("circle", "square", "alien")	circle
fillColor	string	Inside color of cursor	#fff
strokeColor	string	Border color of cursor	#000
strokeWidth	number	Border width of cursor	1
smoothness	number	Smooth movement value of cursor (0 - 1.0)	0.2
endScale	number	Cursor scale animation to value (1 to infinity)	4
endOpacity	number	Cursor opacity animation to value (0 - 1.0)	0.2

Circle Cursor Props

Option	Type	Description	Default
circleRadius	number	Cursor radius	25

Square Cursor Props

Option	Type	Description	Default
shapeSize	number	Square size	25

Alien Cursor Props

Option	Type	Description	Default
shapeSize	number	Alien size	25

License

MIT © mustafademirtas