search

missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.59k stars 825 forks source link

How to remove the preview part? #924

Closed stvncode closed 3 months ago

stvncode commented 3 months ago

I have been trying to remove it by css like :

#preview {
  display: none !important;
}

or 

em-emoji-picker #preview {
  display: none !important;
}

but nothing is working.

EtienneLem commented 3 months ago

You can use previewPosition: 'none'

stvncode commented 3 months ago

Thank you for your quick answer @EtienneLem ! I just have a last question sorry, is there a way to change the position of the portal by any way ? (I want it at the top and not the bottom)

EtienneLem commented 3 months ago

By portal you mean the preview? If so it would be previewPosition: 'top'.

You can see all options here: https://missiveapp.com/open/emoji-mart

stvncode commented 3 months ago

No i mean the Picker position. When i click on my trigger, i want the Picker to appear at the top and not the bottom.

EtienneLem commented 3 months ago

Ah, well that part isn’t handled by EmojiMart, but by your own code.

stvncode commented 3 months ago

For those who wonder, this is working : 

<div style={{ transform: "translate(0, -260px)" }}>
          <Picker
            data={data}
            emojiButtonSize={30}
            onClickOutside={() => {
              setOpen(false)
            }}
            onEmojiSelect={console.log}
            perLine={6}
            previewPosition="none"
          />
        </div>