UI Customization

customizeUI Prop Overview

The customizeUI is a required prop. It accepts an object containing various properties that allow you to personalize the appearance of the editor & toolbar. Here are the properties you can define:

customizeUI Prop: An Example Before We Dive Deep

// import RichTextEditor component & useRichTextEditor hook/
// ...
 
export default function Demo() {
 
    // ...
 
    return (
 
        <RichTextEditor
 
            customizeUI={{
                backgroundColor: '#fcfcfc',
                primaryColor: '#20464b',
                iconColor: '#121212'
                stickyToolbarOnScroll: true,
                defaultVisibleToolbarOptions:{
                    phone: 5,
                    tablet:8,
                    laptop:15
                },
                typography: {
                    p:{
                        fontSize: '1rem',
                        fontFamily: "'Noto Sans', sans-serif",
                        fontWeight: 400,
                        lineHeight: 1.5,
                        letterSpacing: '0.001em',
                    },
                    //...
                }
            }}
            //...
        />
 
    )
}

In the example usage above, you've seen how the customizeUI prop can be leveraged to tailor the RichTextEditor's UI to your specific needs. In the following sections of this page, we'll dissect every single property available within customizeUI, so you can gain a full understanding of how to make the editor truly your own.

Background, Primary & Icon Color

customizeUI={{
    backgroundColor: '#fcfcfc', // required
    primaryColor: '#20464b' // required
    iconColor: '#121212' //optional
}}

Here's how these properties affect the UI:

• backgroundColor: Sets the background color for both the toolbar and editor. The text color adjusts automatically based on the chosen background color.
• primaryColor: Defines the color for buttons and specific text elements, enhancing the UI.
• iconColor: Specifies the color of icons in the toolbar.

Theming

If you are using themes like dark and light modes in your application, you can adjust the editor's colors dynamically. Assuming you have a state like isDarkMode which becomes true when the application is in dark mode and false during light mode:

customizeUI={{
    backgroundColor: isDarkMode ? '#000000' : '#fcfcfc',
    primaryColor: isDarkMode ? '#ffffff' : '#20464b',
    iconColor: isDarkMode ? '#f0f0f0' : '#121212'
}}

Typography

If you've included "header" in the toolbarOptions prop, the toolbar will display a "header" option. This enables users to select text styles like "Normal", "Heading 1", "Heading 2", "Heading 3", and others.

By default, these styles have predefined appearances and it's optional to customize these styles. But if you want to ensure the editor's typography matches your application's design, you can provide custom styles for these headers by using the typography property inside the customizeUI prop:

customizeUI={{
    typography: {
        // Style for "Normal" text
        p:{
            fontSize: '1rem',
            fontFamily: "'Noto Sans', sans-serif",
            fontWeight: 400,
            lineHeight: 1.5,
            letterSpacing: '0.001em',
        },
        // Style for "Heading 5"
        h5:{
            fontSize: '0.9rem',
            fontFamily: "'Noto Sans', sans-serif",
            fontWeight: 500,
            lineHeight: 1.4,
            letterSpacing: '0.001em',
        }
    } 
}}

In this example:

• The style for "Normal" text is represented by the p key.
• The style for "Heading 5" is represented by the h5 key.

You're free to customize any heading level. For example:

• Use h1 for "Heading 1"
• Use h2 for "Heading 2" ... and so on.

Each heading key allows you to set properties such as "fontSize", "fontFamily", "fontWeight", "lineHeight", and "letterSpacing". You can choose to set all of these or only the ones you need.

Stick the Toolbar at the Top on Scroll

For a seamless user experience, it's essential that the toolbar remains easily accessible. If it disappears from view as users scroll, they might find it cumbersome to scroll back up every time they need to use a toolbar option.

To enhance usability, you can make the toolbar "sticky" at the top when users scroll past it. Achieve this by setting the stickyToolbarOnScroll property to true within the customizeUI prop:

customizeUI={{
    stickyToolbarOnScroll: true
}}

This property is optional, and its default value is false, meaning the toolbar won't stick unless explicitly set.

Set the Number of Default Visible Toolbar Options

If you've explored our demo (opens in a new tab), you might've noticed that not all toolbar options are visible right away. Instead, there's a more button. Clicking this reveals all the available toolbar options.

Why do we use this approach? The demo (opens in a new tab) has over 25 toolbar options. Displaying all these options, especially on smaller screens like mobiles, would consume a significant amount of space. Additionally, the on-screen keyboard on mobile devices occupies space. So, the more/less button helps keep things tidy and user-friendly.

By default, you'll see:

• 5 toolbar options on mobile screens
• 7 on tablet screens
• 12 on laptop screens

To customize these default settings, you can utilize the defaultVisibleToolbarOptions property within the customizeUI prop. This allows you to specify the number of toolbar options you wish to display for each device type:

 customizeUI={{             
    defaultVisibleToolbarOptions:{
        phone: 5,
        tablet: 8,
        laptop: 15
    }
}}