hanzi_writer_acjk_custom_charDataLoader_cdn_quickstart.ts

1import HanziWriter from 'hanzi-writer';
2
3/**
4 * hanzi-writer-data-acjk provides character data for HanziWriter.
5 * It is typically used by pointing the charDataLoader to its CDN or local path.
6 */
7
8const writer = HanziWriter.create('character-target-div', ' Kanji/Hanzi', {
9  width: 400,
10  height: 400,
11  padding: 5,
12  showOutline: true,
13  // This is the official way to load data from the acjk repository
14  charDataLoader: (char: string) => {
15    return fetch(`https://cdn.jsdelivr.net/npm/hanzi-writer-data-acjk@latest/${char}.json`)
16      .then(res => res.json());
17  }
18});
19
20writer.animateCharacter();