Skip to content

Change floatingLabelText prop type from string to node #308

@mdboop

Description

@mdboop

Currently, floatingLabelText is enforced as a string prop-type, passed to FloatingLabel component through the text prop with same prop type, and then rendered inside the label component. This makes it more difficult to use when you're developing an app that uses an i18n library such as react-intl. Most i18n libraries in React provide a component that accepts an id, but I'll use react-intl as my example.

import { FormattedMessage } from 'react-intl';

function Header() => (
  <h1>
    <FormattedMessage id="app.header" />
  </h1>
);

export default Header;

Some third-party libraries you might work with, or even your own code, might necessitate getting the translated string directly, in which case you'd do something like this:

import { withIntl } from 'react-intl';

function Header({ intl }) => (
  <h1>
    {intl.formatMessage({ id: 'app.header' })}
  </h1>
);

export default withIntl(Header);

These two are equivalent (except that FormattedMessage would wrap the text in a span tag), but usually it's preferable to just have the component. It's more readable, your prop types (or interfaces if you're using TS) are simpler, and overall it's a bit less overhead when writing your code.

The floatingLabelText could easily enforce PropTypes.node instead of string and it would work the same, and afford this use-case.

Pros:

  1. Using this component and working with i18n libraries is more ergonomic because you can pass a component with your string id and be done.
  2. Not a breaking change

Cons:

  1. Could be misused by passing some component with conflicting styles, or some complex component that just doesn't belong there (although there's nothing stopping you from doing that now except a prop types warning).
  2. Maybe not significant enough to warrant a change.

I'd love to hear thoughts on this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions