{"library":"slate-react","title":"Slate React Components and Hooks","description":"slate-react provides the essential React-specific components, hooks, and plugins for building highly customizable rich-text editors with Slate. It integrates the core Slate data model and operations with React's rendering capabilities, leveraging `contenteditable` for a robust editing experience. The current stable version is 0.124.0, which typically releases in conjunction with its core `slate` peer dependency, following a frequent, often weekly, release cadence for minor and patch updates. Key differentiators include its unopinionated core, allowing developers complete control over rendering and behavior, and a powerful plugin-based architecture for extending functionality without modifying the core. This package focuses on flexibility and a declarative approach to content modeling, making it suitable for complex document editing scenarios rather than being an off-the-shelf WYSIWYG solution.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install slate-react"],"cli":null},"imports":["import { Slate } from 'slate-react'","import { Editable } from 'slate-react'","import { useSlate } from 'slate-react'","import { withReact } from 'slate-react'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useMemo, useCallback } from 'react';\nimport { createEditor, Editor, Text } from 'slate';\nimport { Slate, Editable, withReact } from 'slate-react';\n\nconst initialValue = [\n  {\n    type: 'paragraph',\n    children: [{ text: 'This is editable ' }, { text: 'rich', bold: true }, { text: ' text, that you can try out yourself!' }],\n  },\n  {\n    type: 'paragraph',\n    children: [\n      { text: 'Try making some words ' },\n      { text: 'bold', bold: true },\n      { text: ', ' },\n      { text: 'italic', italic: true },\n      { text: ', or even ' },\n      { text: 'underlined', underline: true },\n      { text: '.' },\n    ],\n  },\n];\n\nfunction MyEditor() {\n  const editor = useMemo(() => withReact(createEditor()), []);\n  const [value, setValue] = useState(initialValue);\n\n  const renderLeaf = useCallback(({ attributes, children, leaf }) => {\n    if (leaf.bold) {\n      children = <strong>{children}</strong>;\n    }\n    if (leaf.italic) {\n      children = <em>{children}</em>;\n    }\n    if (leaf.underline) {\n      children = <u>{children}</u>;\n    }\n    return <span {...attributes}>{children}</span>;\n  }, []);\n\n  return (\n    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>\n      <Editable\n        renderLeaf={renderLeaf}\n        placeholder=\"Enter some rich text...\"\n        onKeyDown={event => {\n          if (event.key === '`' && event.ctrlKey) {\n            event.preventDefault();\n            Editor.addMark(editor, 'bold', true);\n          }\n        }}\n      />\n    </Slate>\n  );\n}\n\nexport default MyEditor;\n","lang":"typescript","description":"Demonstrates a basic Slate editor setup with `Slate` and `Editable` components, including custom leaf rendering and a simple keyboard shortcut for bolding text. This example uses `createEditor` and `withReact` to initialize the editor instance, `useState` for managing the editor's value, and `useMemo` to ensure the editor instance is stable across re-renders.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}