You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
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:
Using this component and working with i18n libraries is more ergonomic because you can pass a component with your string id and be done.
Not a breaking change
Cons:
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).
Maybe not significant enough to warrant a change.
I'd love to hear thoughts on this.
The text was updated successfully, but these errors were encountered:
mdboop
changed the title
Change floatingLabelText prop type from string to node or add floatingLabel prop
Change floatingLabelText prop type from string to node
Jan 24, 2019
Currently,
floatingLabelText
is enforced as astring
prop-type, passed toFloatingLabel
component through thetext
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 asreact-intl
. Most i18n libraries in React provide a component that accepts an id, but I'll usereact-intl
as my example.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:
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 enforcePropTypes.node
instead ofstring
and it would work the same, and afford this use-case.Pros:
Cons:
I'd love to hear thoughts on this.
The text was updated successfully, but these errors were encountered: