shuffle-text-c

shuffle-text-c

A component that allows you to shuffle text, by simply set a tag.

日本語 | ENGLISH

---

<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