Unable to find ExampleWrapper in atlaskit user-picker

Jira Development Jira Cloud
, , ,
1

I am trying to use @atlaskit/user-picker to display usernames with avatars, but am not able to find the import ExampleWrapper in the atlaskit packages.

https://atlaskit.atlassian.com/packages/elements/user-picker

image
image907×548 18 KB

2

Did you find a solution? I’m stuck with the same problem

1 Like
3

Hi @sr48 and @anirudhmaddy ,

That import is not actually part of the atlaskit packages. It is in the same repository as where our documentation lives. Sorry about the confusion.

What ExampleHelper does is provide a very basic dummy implementation of what a UserPicker needs to function.

options is an array (or Promise of an array) of hardcoded dummy users.
onInputChange takes a string and updates the options in the React state of the ExampleHelper.

You would not use ExampleHelper in any production app, and it will not fetch a list of users for you.

Thanks,
Michael

4

Hi @mventnor
Can you provide me the exact code of the wrapper? I am stuck too with this.

5

With this code:

<UserPicker
        fieldId="example"
        options={[{id: 'asdsad', name: 'gyuri'}]}
         onChange={()=> console.log('asd')}
         onInputChange={()=> console.log('asd')}
         onSelection={()=> console.log('select')}
         isMulti
         maxPickerHeight={120}
/>

I am getting this error:

main.ed46d1f2.js:sourcemap:2 Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at r (main.ed46d1f2.js:sourcemap:2:161964)

Can you please help me?

1 Like
6

You can find the full source code for that example in this codesandbox: https://codesandbox.io/p/sandbox/atlaskituser-picker-01-multi-guf05

Hope it helps unblock you.

1 Like
7

Hi,
We also had the same [React Intl] Could not find required intl object. error. It was working fine for a long time, and it suddenly started to complain. We are using react-intl package in our project and we already have IntlProvider upper in the hierarchy. We couldn’t find exact reason for this and switched to a <AsyncSelect component and modified items to appear like user picker.

8

My memory’s fuzzy but I think I had this problem and I fixed it by importing from react-intl-next which is a dependency in some Atlaskit components.

import { IntlProvider } from 'react-intl-next';