Skip to content

Instantly share code, notes, and snippets.

@Arifursdev
Forked from inxilpro/x-typed.js
Created May 9, 2024 10:30
Show Gist options
  • Save Arifursdev/896f08fd9b4117d80df48af4debf941f to your computer and use it in GitHub Desktop.
Save Arifursdev/896f08fd9b4117d80df48af4debf941f to your computer and use it in GitHub Desktop.
Alpine.directive('typed', (el, { expression, modifiers }, { evaluateLater, effect, cleanup }) => {
const getStrings = evaluateLater(expression);
const modifierValue = (key, fallback) => {
if (-1 === modifiers.indexOf(key)) {
return fallback;
}
const value = modifiers[modifiers.indexOf(key) + 1];
if (value && ! isNaN(fallback)) {
return parseInt(value);
}
return value ? value : fallback;
}
effect(() => getStrings(strings => {
const instance = new Typed(el, {
strings,
startDelay: modifierValue('delay', 750),
typeSpeed: modifierValue('speed',150),
backSpeed: modifierValue('backspace', 100),
showCursor: ! modifiers.includes('cursorless'),
loop: modifiers.includes('loop'),
cursorChar: '_',
});
cleanup(() => instance.destroy());
}));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment