kanjiapi-wrapper

A wrapper library for kanjiapi.dev. Provides (currently) in-memory only request caching, and wraps the api with a synchronous listener based model.

Installation

yarn add kanjiapi-wrapper / npm install kanjiapi-wrapper

Example usage

Generic usage:

const { Kanjiapi } = require('kanjiapi-wrapper')

const listener = () => {
    // Ask kanjiapi instance for data again and trigger UI redraws
}

const kanjiapi = Kanjiapi.build()
kanjiapi.addListener('listener_name', listener)

const result = kanjiapi.getKanji('字')
// { status: "LOADING", value: null }

// once the data is loaded, any registered listener functions will be called
// to notify the library client that there was a change
// after this point calling kanjiapi.getKanji('字') returns the success result:
// { status: "SUCCESS", value: { kanji: "字", ... } }

mithril.js example:

flems.io

const { Kanjiapi } = require('kanjiapi-wrapper')

const Kanji = {
    view: ({ attrs: { kanji } }) =>
        kanji.status === Kanjiapi.SUCCESS ?
            m('ul', kanji.value.meanings.map(meaning => m('li', meaning))) :
            kanji.status === Kanjiapi.LOADING ?
            'Loading' :
            'Error',
}

const Page = {
    oninit: ({ state }) => state.character = '字',
    view: ({ state, attrs: { kanjiapi } }) => [
        m(
            'input[type=text]',
            {
               oninput: e => state.character = e.target.value,
               value: state.character,
            },
        ),
        m(Kanji, { kanji: kanjiapi.getKanji(state.character) }),
    ],
}

const kanjiapi = Kanjiapi.build();
kanjiapi.addListener('app', m.redraw)

m.mount(document.body, { view: () => m(Page, { kanjiapi }) })

react.js example:

flems.io

const { Kanjiapi } = require('kanjiapi-wrapper')

const Kanji = ({ kanji }) =>
    kanji.status === Kanjiapi.SUCCESS ?
        <ul>
            {kanji.value.meanings.map(meaning =>
                <li key={meaning}>{meaning}</li>)}
        </ul> :
        kanji.status === Kanjiapi.LOADING ?
        <div>Loading</div> :
        <div>Error</div>

const App = ({ kanjiapi }) => {
    const [timestamp, setTimestamp] = React.useState(Date.now())
    kanjiapi.addListener('appState', () => setTimestamp(Date.now()))

    const [character, setCharacter] = React.useState('字')

    return <>
        <input
            type="text"
            value={character}
            onChange={e => setCharacter(e.target.value)}/>
        <Kanji kanji={kanjiapi.getKanji(character)}/>
    </>
}

this.kanjiapi = Kanjiapi.build()
ReactDOM.render(<App kanjiapi={kanjiapi}/>, document.getElementById('app'))

Result form:

All results have a status either of "LOADING", "SUCCESS", or "ERROR", and a value of the parsed API response.

{
    status: "LOADING" | "SUCCESS" | "ERROR",
    value: $RESPONSE,
}

## Methods getUrl(url) Returns a result for an arbitrary api url after appending the version prefix e.g. kanjiapi.getUrl('/kanji/蜜')

getKanji(kanji) Returns a kanji character result

getReading(reading) Returns a reading result

getJoyoSet() Returns the set of Jōyō kanji result

getJinmeiyoSet() Returns the set of Jinmeiyō kanji result

getListForGrade(grade) Returns the list of kanji result for the given grade

getListForJlpt(level) Returns the list of kanji result for the given jlpt level

getWordsForKanji(kanji) Returns a result containing a list of words for a given kanji

Enriched lists

Each kanji list also has an "enriched" variant, which returns the same list in the same order, but with the full kanji object for each character rather than the character on its own. Unlike the plain list methods, these results are ordered arrays rather than sets.

const result = kanjiapi.getListForJlptEnriched(5)
// { status: "SUCCESS", value: [{ kanji: "一", meanings: ["one"], ... }, ...] }

getJoyoEnriched() Returns the list of Jōyō kanji objects result

getJinmeiyoEnriched() Returns the list of Jinmeiyō kanji objects result

getHeisigEnriched() Returns the list of kanji objects which have a Heisig keyword result

getKyoikuEnriched() Returns the list of Kyōiku kanji objects result

getAllEnriched() Returns the list of all available kanji objects result

getListForGradeEnriched(grade) Returns the list of kanji objects result for the given grade

getListForJlptEnriched(level) Returns the list of kanji objects result for the given jlpt level

Development

Development scripts are defined in package.json under yarn test, yarn lint, and yarn release.