ExamplesUI ComponentsChanging Emoji Picker Columns

Changing Emoji Picker Columns

In this example, we change the Emoji Picker to display 5 columns instead of 10.

Try it out: Press the ":" key to open the Emoji Picker!

Relevant Docs:

import "@blocknote/core/fonts/inter.css";import {  GridSuggestionMenuController,  useCreateBlockNote,} from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: "Press the ':' key to open the Emoji Picker",      },      {        type: "paragraph",        content: "There are now 5 columns instead of 10",      },      {        type: "paragraph",      },    ],  });  // Renders the editor instance.  return (    <BlockNoteView editor={editor} emojiPicker={false}>      <GridSuggestionMenuController        triggerCharacter={":"}        // Changes the Emoji Picker to only have 5 columns.        columns={5}        minQueryLength={2}      />    </BlockNoteView>  );}