Alpinejs-cursor NPM

Alpine JS Cursor

Create a custom cursor with Alpine JS and easily apply hover effects 👆

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-cursor@latest/dist/cursor.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

With a Package Manager

yarn add -D alpinejs-cursor

npm install -D alpinejs-cursor

import Alpine from 'alpinejs'
import cursor from 'alpinejs-cursor'

Alpine.plugin(cursor)

Alpine.start()

Example

This plugin makes use of the custom-cursor package.

<body x-data x-cursor>
  ...
</body>

Modifiers

You can pass a single modifier to x-cursor which will modifier how many cursor are created.

<body x-data x-cursor.5>
  ...
</body>

In this example it will create 5 cursor.

Attributes

You can use the x-cursor-target attribute to pass through an array of HTML elements that will apply a unique CSS class name to the <body> tag that you can use for hover effects.

<body x-data x-cursor x-cursor-targets='["button", "#form", ".click"]'>
  ...
</body>

In this example it will create the following classes.

cursor-hover--button
cursor-hover--form
cursor-hover--click

Which you can then use in CSS like this.

.cursor-hover--button [data-cursor] {
  background: #00f;
}

Stats

npm.io npm.io npm.io npm.io

Alpine Alpine JS Alpine JS Plugin Alpine JS Plugins Alpine JS Cursor Cursor Custom Cursor

@everything-registry/sub-chunk-1122

1.0.2

1 month ago

1.0.1

1 year ago

1.0.0

2 years ago