SelectLocale

Base on https://material-ui.com/components/text-fields/

Related component

https://material-ui.com/components/selects/#select

Icon

https://material-ui.com/components/material-icons/

Basic usage

import { SelectLocale } from '@doopage/react-ui-kit'

const Example = () => {
    return <SelectLocale />;
}

export default Example;

Playground

Simple

selectedLocale:

Locale

() => {
  const [selectedLocale, setSelectedLocale] = useState()
  return (
    <div>
      <div>selectedLocale: {selectedLocale}</div>
      <SelectLocale onSelectedChange={setSelectedLocale} />
    </div>
  )
}

() => {
  const [selectedLocale, setSelectedLocale] = useState()
  return (
    <div>
      <div>selectedLocale: {selectedLocale}</div>
      <SelectLocale onSelectedChange={setSelectedLocale} />
    </div>
  )
}

Show default locale

selectedLocale: en_US

defaultLocale: vi_VN

Locale Options: [{"id":"vi_VN","name":"Việt Nam"},{"id":"en_US","name":"English (US)"}]

Locale

Default locale

() => {
  const [selectedLocale, setSelectedLocale] = useState('en_US')
  const [defaultLocale, setDefaultLocale] = useState('vi_VN')
  const [options, setOptions] = useState([
    {
      id: 'vi_VN',
      name: 'Việt Nam',
    },
    { id: 'en_US', name: 'English (US)' },
  ])
  return (
    <div>
      <div>selectedLocale: {selectedLocale}</div>
      <div>defaultLocale: {defaultLocale}</div>
      <div>Locale Options: {JSON.stringify(options)}</div>
      <SelectLocale
        defaultSelectedLocale={selectedLocale}
        onSelectedChange={setSelectedLocale}
        defaultLocale={defaultLocale}
        onCheckedDefaultLocale={setDefaultLocale}
        defaultOptions={options}
        onOptionsChange={setOptions}
        showCheckedDefaultLocale
      />
    </div>
  )
}

() => {
  const [selectedLocale, setSelectedLocale] = useState('en_US')
  const [defaultLocale, setDefaultLocale] = useState('vi_VN')
  const [options, setOptions] = useState([
    {
      id: 'vi_VN',
      name: 'Việt Nam',
    },
    { id: 'en_US', name: 'English (US)' },
  ])
  return (
    <div>
      <div>selectedLocale: {selectedLocale}</div>
      <div>defaultLocale: {defaultLocale}</div>
      <div>Locale Options: {JSON.stringify(options)}</div>
      <SelectLocale
        defaultSelectedLocale={selectedLocale}
        onSelectedChange={setSelectedLocale}
        defaultLocale={defaultLocale}
        onCheckedDefaultLocale={setDefaultLocale}
        defaultOptions={options}
        onOptionsChange={setOptions}
        showCheckedDefaultLocale
      />
    </div>
  )
}

Show default option

selectedLocale:

Locale Options: [{"id":"default","name":"Default Locale","allowRemove":false},{"id":"vi_VN","name":"Việt Nam"}]

Locale

() => {
  const [selectedLocale, setSelectedLocale] = useState()
  const [options, setOptions] = useState([
    { id: 'default', name: 'Default Locale', allowRemove: false },
    {
      id: 'vi_VN',
      name: 'Việt Nam',
    },
  ])
  return (
    <div>
      <div>selectedLocale: {selectedLocale}</div>
      <div>Locale Options: {JSON.stringify(options)}</div>
      <SelectLocale
        onSelectedChange={setSelectedLocale}
        defaultOptions={options}
        onOptionsChange={setOptions}
      />
    </div>
  )
}

() => {
  const [selectedLocale, setSelectedLocale] = useState()
  const [options, setOptions] = useState([
    { id: 'default', name: 'Default Locale', allowRemove: false },
    {
      id: 'vi_VN',
      name: 'Việt Nam',
    },
  ])
  return (
    <div>
      <div>selectedLocale: {selectedLocale}</div>
      <div>Locale Options: {JSON.stringify(options)}</div>
      <SelectLocale
        onSelectedChange={setSelectedLocale}
        defaultOptions={options}
        onOptionsChange={setOptions}
      />
    </div>
  )
}

SelectLocale

Basic usage

Playground

Simple

Show default locale

Show default option

Properties

Select Locale