Select

The select component allows provides you with an international friendly way to switch values given by an input. Selects are essentially compile time versions of a switch statement or object lookup. The problems that those run time solutions can execute arbitrary code and are very different to analyze statically. The difference that Select provides is an easy to use run time and compile time interface for Stele to use.

On matches

Matches should usually be something with multiple values. A boolean is really hard to support from a translation perspective. It is usually much easier to use two messages instead.

Basic Usage

import * as React from 'react'
import { Select } from '@patreon/stele'
function MyComponent(props) {
    return (
        <Text intl>
            But babe,
            <Select
                value={props.character}
                matches={{ ben: 'calzone', andy: 'pizza' }}
            />
        </Text>
    )
}

Example message

But babe, {character, plural,
    ben {calzone}
    andy {pizza}
}

Props

Usage

The value prop can be either a number or a string. The value must be a key inside the matches object.

() => {
  const [checked, setChecked] = React.useState(false)
  const yesOrNo = checked ? 'yes' : 'no'
  return (
    <>
      <label>
        Does Kel love orange soda?
        <input
          type="checkbox"
          checked={checked}
          onChange={_ => setChecked(!checked)}
        />
      </label>
      <p>
        Is it true?
        <Select
          value={yesOrNo}
          matches={{ yes: 'I do, I do, I doooo', no: 'No :(' }}
        />
      </p>
    </>
  )
}