<script src="https://unpkg.com/shuffle-text-c/dist/esm/shuffle-text.js" type="module"></script>
<shuffle-text text="text to be displayed" />- 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.
- Install it with
npm install shuffle-text-c - Call the loader as follows.
<script>
import { applyPolyfills, defineCustomElements } from "shuffle-text-c/loader";
applyPolyfills().then(() => {
defineCustomElements();
});
//...<templeate>
<div>
<shuffle-text text="text to be displayed" />
</div>
</templeate>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>
);
}| 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 |
MIT ©ivgtr
