How should we handle text in components?

[razor-x]

We may end up passing all text as props, so we might consider instead:

Originally posted by @razor-x in #1 (comment)

[razor-x]

@mikewuu What do you think of exposing the text as props using this interface / pattern?

[mikewuu]

Assuming this is a UI component, I think children makes sense here

[razor-x]

It is intended to work like this. How would this work with children instead?

export type DeviceCardProps = UseDeviceParams & { t?: DeviceCardText }

interface DeviceCardText {
  device_id: string
  device_name: string
}

export const DeviceCard = ({ t = defaultDeviceCardText, ...props }: DeviceCardProps): ReactElement => {
  const { device } = useDevice(props)
  return (
    <div>
      <p>{t.device_name}: {device.device_name}</p>
      <p>{t.device_id}: {device.device_id}</p>
    </div>
}

export const defaultDeviceCardText = {
  device_name: 'Device Name',
  device_id: 'ID',
}

[mikewuu]

Ahh I get it now. This is for the app static text. Can we rename the external prop to labels?

Instead of:

<DeviceCard  device={device} t={{ name: 'dev:' }}/>`

It would be:

<DeviceCard  device={device} labels={{ name: 'dev:' }}  />

As for the implementation, maybe something like:

export type DeviceCardProps = UseDeviceParams & { labels?: Partial<typeof defaultLabels> }

export const DeviceCard = ({ labels, ...props }: DeviceCardProps): ReactElement => {
  const { device } = useDevice(props)

const t  = {...defaultLabels, ...labels }

  return (
    <div>
      <p>{t.name}: {device.device_name}</p>
    </div>
}

export const defaultLabels = {
  name: 'Device Name',
}

[razor-x]

Yea, this is better, and labels is a good name. I like this as well: Partial<typeof defaultLabels>. I think we should export the type though to for consumer ergonomics:

export type DeviceCardProps = UseDeviceParams & { labels?: DeviceCardLabels }

export type DeviceCardLabels = Partial<typeof defaultLabels>

The original idea for t was taken from i18next: it's short and recognizable. Although in that case t would be a function. All good keeping it as the name of the merged labels.

[mikewuu]

Another option would be to just support render props everywhere instead:

<DeviceCard  device={device}  name={ (deviceName) => <p>dev: : {deviceName}</p> } />

[razor-x]

Hmm, could do that and allow the props to have type string | (text: string) => string | ReactNode. But hat might give too much control and break the layout.

[razor-x]

Closing this as the t. system we are using is working for now.

[razor-x]

Yea, another issue with the object is that unused keys are not linted against. This pseudo i18n has three nice features: first, it keeps the text out of the JSX which often makes the code harder to read / creates annoying diffs / makes typos harder to spot, etc; second, the text is not that far away from where it is used since it stays in the same file alongside the component (which partially mitigates your primary gripe); and third, it isolates the localized text so it may be factored out later.

See also #230 (comment)