JSPM

scrambling-text-next

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q18113F
  • License MIT

A super lite (4.29 kB │ gzip: 1.20kB) JavaScript library written in vanilla js with ready to use components for React, Vue for scrambling text.

Package Exports

  • scrambling-text-next
  • scrambling-text-next/react
  • scrambling-text-next/vue

Readme

Scrambling Text

scrambling text sample

A super lite (4.29 kB │ gzip: 1.20kB) JavaScript library written in vanilla js with ready to use components for React, Vue for scrambling text.



Check out the demo 🚀

This library was forked from sogoagain/scrambling-text-js and updated to use most modern JavaScript features and to be more lightweight.


Table of Contents

Installation

npm i scrambling-text-next

or

yarn add scrambling-text-next

Examples

Vanilla

import Scramble from "scrambling-text-next";

document.addEventListener("DOMContentLoaded", () => {
  const elm = document.querySelector(".vanilla-text") as HTMLElement;

  const update = (str: string) => {
    elm.textContent = str;
  };

  const Scrambler = new Scramble();

  elm.addEventListener("click", () => {
    Scrambler.scramble(elm.textContent!, {
      onIteration: update,
    });
  });

Scramble

 

  • Vue

<script lang="ts" setup>
import { Scramble } from "scrambling-text-next/vue";
</script>
<template>
  <Scramble :delay="1000">
    WILL SCRAMBLE AFTER A SEC
  </Scramble>
</template>

 

  • React

import { Scramble } from "scrambling-text-next/react";

export default function Page() {
  return <Scramble delay={1000}> WILL SCRAMBLE AFTER A SEC</Scramble>;
}

ScrambleInView

 

  • Vue

<script lang="ts" setup>
import { ScrambleInView } from "scrambling-text-next/vue";
</script>
<template>
  <ScrambleInView :once="false">
    WILL SCRAMBLE ANYTIME IN VIEW
  </ScrambleInView>
</template>

 

  • React

import { ScrambleInView } from "scrambling-text-next/react";

export default function Page() {
  return (
    <ScrambleInView once={false}> WILL SCRAMBLE ANYTIME IN VIEW</ScrambleInView>
  );
}

ScrambleOnHover

 

  • Vue

<script lang="ts" setup>
import { ScrambleOnHover } from "scrambling-text-next/vue";
</script>
<template>
  <ScrambleOnHover>
    WILL SCRAMBLE ANYTIME HOVERED
  </ScrambleOnHover>
</template>

 

  • React

import { ScrambleOnHover } from "scrambling-text-next/react";

export default function Page() {
  return <ScrambleOnHover> WILL SCRAMBLE ANYTIME HOVERED</ScrambleOnHover>;
}

Caveats

  • Vue

<script lang="ts" setup>
import { ScrambleOnHover } from "scrambling-text-next/vue";
</script>
<template>
    <ScrambleOnHover
        elm="a"
        props={{
          href: 'https://github.com/UnCor3/scrambling-text-next'
          target: '_blank'
        }}
      >
        STAR THIS REPO
      </ScrambleOnHover>
</template>

  • React

import { ScrambleOnHover } from "scrambling-text-next/react";

export default function Page() {
  return (
    <ScrambleOnHover
      elm="a"
      props={{
        href: "https://github.com/UnCor3/scrambling-text-next",
        target: "_blank",
      }}
    >
      STAR THIS REPO
    </ScrambleOnHover>
  );
}

Types

 

  • Vanilla

 

Scrambler class is the default export

export type OnIteration = (scrambledText: string) => void;

export type OnFinished = (scrambledText: string) => void;

type Options {
    /*On every text change*/
  onIteration: OnIteration;
    /*On text change finished*/
  onFinished?: OnFinished;
    /**
     * Characters to scramble
     *  @default ["@", "#", "$", "%", "£", "&", "*", "§", "+", "_"] and alphabet,
     *
     */
  characters?: string[];
    /**
        Prevent getting called multiple times, if set to false and called more than once you will break the iteration
        @default true
    */
  preventGettingCalledMultipleTimes?: boolean;
}

class Scrambler {
  scramble(text: string, _options: Options): void;
}

 

  • React

 

  • Scramble Types

{
    /**
     * Text to be scrambled
     */
    children: string;
    /**
     * Html element type
     * @default "span"
     */
    elm?: keyof ReactHTML;
    /**
     * Any kind of prop that can be passed to an element
     */
    props: React.HTMLProps<HTMLElement>;
    /**
     * Delay to start in ms
     */
    delay?: number;
}

 

  • ScrambleOnHover Types

{
    /**
     * Pass true to scramble once
     */
    once : boolean;
    /**
     * Text to be scrambled
     */
    children: string;
    /**
     * Html element type
     * @default "span"
     */
    elm?: keyof ReactHTML;
    /**
     * Any kind of prop that can be passed to an element
     */
    props: React.HTMLProps<HTMLElement>;
    /**
     * Delay to start in ms
     */
    delay?: number;
}

 

  • ScrambleInView Types

{
    /**
     * Pass any options that can be passed to IntersectionObserver
     */
    observerOptions?: IntersectionObserverInit;
    /**
     * Pass true to scramble once
     */
    once : boolean;
    /**
     * Text to be scrambled
     */
    children: string;
    /**
     * Html element type
     * @default "span"
     */
    elm?: keyof ReactHTML;
    /**
     * Any kind of prop that can be passed to an element
     */
    props: React.HTMLProps<HTMLElement>;
    /**
     * Delay to start in ms
     */
    delay?: number;


}

 

  • Vue

 

  • Scramble Types

{
    /**
     * Html element type
     * @default "span"
     */
    elm?: keyof HTMLElementTagNameMap;
    /**
     * Any kind of prop that can be passed to an element
     */
    props: Record<string, any>;
    /**
     * Delay to start in ms
     */
    delay?: number;
}

 

  • ScrambleOnHover Types

{
    /**
     * Pass true to scramble once
     */
    once : boolean;
    /**
     * Html element type
     * @default "span"
     */
    elm?: keyof HTMLElementTagNameMap;
    /**
     * Any kind of prop that can be passed to an element
     */
    props: Record<string, any>;
    /**
     * Delay to start in ms
     */
    delay?: number;
}

 

  • ScrambleInView Types

{
    /**
     * Pass any options that can be passed to IntersectionObserver
     */
    observerOptions?: IntersectionObserverInit;
    /**
     * Pass true to scramble once
     */
    once : boolean;
    /**
     * Html element type
     * @default "span"
     */
    elm?: keyof HTMLElementTagNameMap;
    /**
     * Any kind of prop that can be passed to an element
     */
    props: Record<string, any>;
    /**
     * Delay to start in ms
     */
    delay?: number;
}