Introduction
When you add a placeholder to a page template, all you’re doing is indicating a specific location in the template where content can be added. You must tie the placeholder name with a placeholder definition to govern how material is handled at that spot. Placeholder definitions define what content can be added to the contribution region, how it will be presented, and what actions contributors will be allowed to do. Contributors may be able to edit the metadata of content displayed in the contribution region, or they may be able to switch the content of contribution regions, for example, using a placeholder.
Installation
Install react-native-pell-rich-editor to get started.
npm i react-native-pell-rich-editor
RichEditor
Now it’s time to make the editor component. To develop a fully effective Rich text Editor, the RichEditor component will be used.
The RichEditor component is referred to as ref, and we’ll need it to create our toolbar.
const richText = React.useRef();
const [data, setData] = useState(‘anyValue’);
<RichEditor ref = {richText} disabled = {false}
editorStyle = {{ backgroundColor: ‘grey’, color: ‘white’ }} initialContentHTML = { }
onChange = {async (text) => { await setData(text)}}
/>
RichToolbar
This is a Component that provides a toolbar for manipulating an editor quickly and conveniently. It’s meant to be used in conjunction with a RichEditor component.
One property of the RichToolbar is required:
getEditor()
This function must return a reference to a RichEditor component.
This is due to the fact that the ref isn’t established until after the first render, which happens before the toolbar is drawn. This means that any ref supplied directly will be undefined by default.
<RichToolbar style={{ backgroundColor: ‘grey’, borderWidth: 1 }}
editor = {richText} iconTint = {“black”}
selectedIconTint = {“white”}
actions = {[actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1, ‘placeHolder’,]}
iconMap = {{ [‘placeHolder’]: ({ tintColor }) => (PH), }}
placeHolder={async () => await getPlaceholders()}
/>
actions is a list of actions supplied by the toolbar, which can be customised or are default. There are also a few actions supplied by the library’s actions member. You can create your own actions by creating a function and linking it to the action. The icons of self-made actions are defined using iconMap.
Complete Code:
import { actions, RichEditor, RichToolbar } from “react-native-pell-rich-editor”;
const richText = React.useRef();
const [localData, setLocalData] = useState({
placeholderClicked: false,
placeholder: [
{ label: “First Name”, value: “{{firstName}}” },
{ label: “Last Name”, value: “{{lastName}}” },
{ label: “Address”, value: “{{address}}” },
{ label: “Date of birth”, value: “{{dob}}” },
], })
Message:
<RichToolbar style={{ backgroundColor: ‘grey’, borderWidth: 1 }}
editor={richText} iconTint={“black”} selectedIconTint={“white”}
actions={[actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1, ‘placeHolder’,]}
iconMap={{ [‘placeHolder’]: ({ tintColor }) => (PH), }}
placeHolder={async () => await getPlaceholders()}
/>
<RichEditor ref = {richText} disabled = {false}
editorStyle = {{ backgroundColor: ‘grey’, color: ‘white’ }} initialContentHTML = { }
onChange = {async (text) => { await setData(text)}}
/>
Simple but nice! Stay Tuned!