JSPM – react-lang-dropdown@1.0.0

Package Exports

react-lang-dropdown

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-lang-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Short Description

An easy way to implement a dropdown-menu to react and update the content with the new language.

The library adds a custom hook to your client, that takes an language-object or json-file as argument.

Quick-start

    npm i react-lang-dropdown

In the App.js import the library and use it like a normal custom hook.

    import languageDropdown from 'react-lang-dropdown'

    const [language, Dropdown] = languageDropdown.useDropdown(languages)

The languages-parameter needs to be an object that has a bcp-47-standard as key and a language-object as value. The language-object should hold the name, nativename, bcp-47 and a flag-emoji.

"en":{
        "name":"English",
        "emoji": "🇬🇧",
        "nativeName":"English",
        "content": "{}",
        "bcp47": "en"
    }

It is strongly recommended to use the "npx-languages" npm-package to provide the correct syntax and structure for this.

Code examples

  let languages = {
    en: {
        name: "English",
        native: "English",
        content: {
        title: "Hello, codeworks"
        },
        emoji: "🇬🇧",
        bcp47: "en",
    },
    de: {
        name: "German",
        native: "Deutsch",
        content: {
        title: "Hallo, Codeworks"
        },
        emoji: "🇩🇪",
        bcp47: "de",
        }
  }
  function App() {
      const [language, Dropdown] = languageDropdown.useDropdown(languages, {naming: 'emoji'})
  ...}

  return (
      <div className="App">
      <Dropdown />

      <h1>{language.content.title}</h1>
      </div>
  )