Hi,
I’ve tried to use @atlaskit/user-picker component in our React app but it fails with many errors ("Module not found: Error: Can’t resolve ‘react-intl-next’ in ‘…/node_modules/@atlaskit/user-picker/dist/esm/components’’ and couple similar ones). In the user-picker docs there is a disclaimer ‘consider using the smart-user-picker over user-picker if possible’ but @atlaskit/user-picker/smart-user-picker found in Atlaskit docs is deprecated and the message in there says “SmartUserPicker has moved packages! Please use @atlaskit/smart-user-picker instead” but the link does not load and @atlaskit/smart-user-picker is nowhere to be found. So is there any user-picker component that Atlassian recommends to use in React?
3 Likes
Hello! Were you able to find a working alternative for this? Thank you!
Hi,
I just looked into our code and we seem to use react-select (Async variant) for this use case with a custom formatOptionLabel. If I remember correctly, most atlaskit select components are using react-select as their base.
In addition to the formatOptionLabel you may also need to add the unassigned User to your options. The localization of this option may also be the cause of the @atlaskit/user-picker error message as they need to somehow translate this option and seems to use react-intl-next to do so. As we use a different frontend translation library, we estimated it to be easier to use react-select directly for this one use case than to switch our localization library
Hi, unfortunately I didn’t find any alternative so I’ve used AsyncSelect from @atlaskit/select. You can customise the option labels in this component by using the ‘formatOptionLabel’ prop.
Thank you! I ended up following that route after writing. Thank you so much for taking the time to reply.