<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 |

License

MIT ©ivgtr