README
Okiba / Cursor
A base component aimed to handle a custom html cursor
import Cursor from '@okiba/cursor'
const cursor = new Cursor({
el: document.getElementById('my-custom-cursor'),
options: {
inertia: 0.25
}
})
Installation
npm i --save @okiba/cursor
Or import it directly in the browser
<script type="module" src="https://unpkg.com/@okiba/cursor/index.js"></script>
Usage
import Cursor from '@okiba/cursor'
Untranspiled code 🛑
Okiba UI packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:
{
test: /\.js$/,
exclude: /node_modules\/(?!(@okiba)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
constructor(props)
Arguments
props
: Object
+ setup()
Sets cursor base styles (can be extended/overwritten)
show()
Reveals cursor (can be extended)
hide()
Unveils cursor (can be extended)
move(inertia)
Animates cursor to pointer position (can be overwritten)
Arguments
inertia
: Number
+ The lerping factor
hover(matchedSelector)
Handles hover event
Arguments
matchedSelector
: Object
+ The trigger selector
reset()
Restores the cursor default state (should be implemented)
onPointerInView(payload)
Handles pointer entering/leaving viewport callback
Arguments
payload
: Object
+ The pointer inview event payload
onPointerMove(payload)
Updates cursor position
Arguments
payload
: Object
+ The pointermove event payload
onPointerOver(e)
Handles pointer hover
Arguments
e
: Event
+ The mouseover/touchmove event
onPointerDown()
Handles pointer down
onPointerUp()
Handles pointer up
onRAF()
Handles request animation frame
onResize()
Handles resize
listen()
Initializes listeners (can be extended)
onDestroy()
Kills listeners (can be extended)
defaultTriggers()
Default triggers selectors