Shuffle-text-c NPM

<script src="https://unpkg.com/shuffle-text-c/dist/esm/shuffle-text.js" type="module"></script>

<shuffle-text text="text to be displayed" />

Demo

demo

Usages

Script tag

Set a script tag like this. <script src="https://unpkg.com/shuffle-text-c/dist/esm/shuffle-text.js" type="module"></script>
Call <shuffle-text /> at any place.

npmjs

Install it with npm install shuffle-text-c
Call the loader as follows.

Vue

<script>
  import { applyPolyfills, defineCustomElements } from "shuffle-text-c/loader";

  applyPolyfills().then(() => {
    defineCustomElements();
  });

  //...

<templeate>
  <div>
    <shuffle-text text="text to be displayed" />
  </div>
</templeate>

React

import { applyPolyfills, defineCustomElements } from "shuffle-text-c/loader";

applyPolyfills().then(() => {
  defineCustomElements();
});

export default function App() {
  return (
    <div>
      <shuffle-text text="text to be displayed" />
    </div>
  );
}

Configs

Property	Attribute	Description	Type	Default	Required
`text`	`text`	text to be displayed	`string`		Yes
`emptyChars`	`empty-chars`	Fill-in-the-blank character	`string`	`'-'`	No
`hover`	`hover`	re-rendering on hover	`boolean`	`false`	No
`openTime`	`open-time`	The time it takes for text to be inserted.	`number`	`1000`	No
`randomChars`	`random-chars`	Randomly inserted characters	`string`	`'ABCDEFGHIJKLMNOPQRSTUVWXYZ?!#$%&()=~-\\|'`	No
`timeOut`	`time-out`	One shuffle time	`number`	`10`	No