TextEditor(props: { text: string; setText: (text: string) => void }): Component;
The current text content displayed in the editor.
setText
(text: string) => void
required
Callback invoked when the user edits the text. Use this to update your state.
Support
Usage
Basic text editor
const body = () => {
const [text, setText] = useState("")
return TextEditor({ text, setText })
}
With frame and border
const body = () => {
const [notes, setNotes] = useState("")
return TextEditor({ text: notes, setText: setNotes })
.frame({ minHeight: 200 })
.padding(8)
.border(Color("gray"), 1)
.cornerRadius(8)
}
const body = () => {
const [title, setTitle] = useState("")
const [body, setBody] = useState("")
return VStack({ spacing: 16 }, [
TextField({ placeholder: "Title", text: title, setText: setTitle }),
TextEditor({ text: body, setText: setBody })
.frame({ minHeight: 300 }),
Button("Submit", () => {})
])
.padding(16)
}
See Also