Allow for different behaviour based on the element hovered

[nico-k3]

In an Project, there was the need to have the cursor show the direction a carousel would slide when clicked. Therefore I needed the ability to change the behaviour of the cursor based on the element hovered.

• Added the ability to have different configurations for different clickables.
• Added the ability to display text instead of the inner cursor.

[stephenscaff]

Hey! I was literally just thinking about this - options for the cursor to convert/morph into stuff base on state.

For example, updating to an arrow/chev/vector (as you mention), or a small title, preview image, loader animation, etc.

Hadn't decided on the design of it though - ie: pass in a custom template/component, just svg, etc.

Will take a look as soon as I get a chance. Thanks!

[nico-k3]

Hey! I just updated the name of the prop and the type, to better represent this use case.

Here is an example of a config:

<AnimatedCursor
  clickables={[
    {
       target: '.slider-next-button',
       children: 'next',
       outerScale: 3,
       innerStyle: {
         backgroundColor: 'transparent',
         size: '22px',
         transform: 'rotate(90deg)'
      },
      outerStyle: {
        border: '0px solid var(--cursor-color)',
        backgroundColor: 'rgb(144, 181, 214, 0.8)'
      }
    },
    {
       target: '.slider-prev-button',
       children: <div>prev</div>,
       outerScale: 3,
       innerStyle: {
         backgroundColor: 'transparent',
         size: '22px',
         transform: 'rotate(-90deg)'
      }
      outerStyle: {
        border: '0px solid var(--cursor-color)',
        backgroundColor: 'rgb(144, 181, 214, 0.8)'
      }
    },
    'a',
    'input[type="text"]',
    'input[type="email"]',
    'input[type="number"]',
    'input[type="submit"]',
    'input[type="image"]',
    'label[for]',
    'select',
    'textarea',
    'button',
    '.link'
  ]}
  innerSize={8}
  outerSize={35}
  innerScale={1}
  outerScale={2}
  outerAlpha={0}
  showSystemCursor={false}
  hasBlendMode={true}
  outerStyle={{
    border: '3px solid var(--cursor-color)'
  }}
  innerStyle={{
    backgroundColor: 'var(--cursor-color)'
  }}
/>

All cursor config options except 'showSystemCursor' and 'trailingSpeed' are valid inside a clickable config.

Am currently also trying out a 'hugging' cursor, where the outer circle is encapsulating the hovered Element (takes its position, its width, its height). But haven't found a fully satisfying method jet.

[imjuangarcia]

Thanks for the library, and thanks for this! Would be great to have this functionality 🙌🏻

[stephenscaff]

Sorry, had to revert this. Didn't vet as much as I should have (or at all honestly given reviewers).

Would still love to add this feature of course, but here are my issues (if you wanna do another PR):

1. PR introduces TS errors, preventing the build. Did you npm run lint?

I got

Argument of type 'Clickable' is not assignable to parameter of type 'SetStateAction..., Type 'string' is not assignable to type 'SetStateAction...

We need to make sure that the clickables prop in CursorCore is provided as an array of clickable selectors, as defined in the AnimatedCursorProps type.

2. Keep it TS now (stylistic) - Find.js should be find.ts, something like this

3. Provide demo and docs. Add new cursor example to the Demo. Update readme docs with example setup in the Cursor Types section.

Thanks!