{"id":13666125,"url":"https://github.com/octet-stream/slate-to-react","last_synced_at":"2025-04-10T18:31:36.325Z","repository":{"id":129046674,"uuid":"538677253","full_name":"octet-stream/slate-to-react","owner":"octet-stream","description":"React component and utilities to transform Slate nodes to React","archived":false,"fork":false,"pushed_at":"2024-11-18T04:37:08.000Z","size":681,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T03:01:35.691Z","etag":null,"topics":["react","react-component","react-hook","slate-react","slatejs","typescript"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/slate-to-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/octet-stream.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-19T20:02:48.000Z","updated_at":"2024-11-13T20:41:01.000Z","dependencies_parsed_at":"2023-09-24T09:10:43.619Z","dependency_job_id":"ead97e7f-bf44-4131-8fed-b9e0626a40fd","html_url":"https://github.com/octet-stream/slate-to-react","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octet-stream%2Fslate-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octet-stream%2Fslate-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octet-stream%2Fslate-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/octet-stream%2Fslate-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/octet-stream","download_url":"https://codeload.github.com/octet-stream/slate-to-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248271769,"owners_count":21075800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-component","react-hook","slate-react","slatejs","typescript"],"created_at":"2024-08-02T06:01:02.225Z","updated_at":"2025-04-10T18:31:35.623Z","avatar_url":"https://github.com/octet-stream.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# slate-to-react\n\nReact component and utilities to transform [Slate](https://github.com/ianstormtaylor/slate) nodes to React.\n\n[![codecov](https://codecov.io/gh/octet-stream/slate-to-react/branch/main/graph/badge.svg?token=MBkEyEwJO6)](https://codecov.io/gh/octet-stream/slate-to-react)\n[![CI](https://github.com/octet-stream/slate-to-react/actions/workflows/ci.yml/badge.svg)](https://github.com/octet-stream/slate-to-react/actions/workflows/ci.yml)\n[![ESLint](https://github.com/octet-stream/slate-to-react/actions/workflows/eslint.yml/badge.svg)](https://github.com/octet-stream/slate-to-react/actions/workflows/eslint.yml)\n\n## Installation\n\nTo install, run one of the following commands:\n\npnpm:\n\n```sh\npnpm add slate-to-react slate slate-react\n```\n\nnpm:\n\n```sh\nnpm i slate-to-react slate slate-react\n```\n\nyarn:\n\n```sh\nyarn add slate-to-react slate slate-react\n```\n\n### Usage\n\n1. You can render Slate nodes using [`SlateView`](#slateview) component:\n\n```tsx\n\"use client\"\n// You can use `slate-to-react` with a framework like Next.js (with its App Router) the above directive might be a way to mark \"client component\".\n// Yuo *must* render SlateView within the client components, because it relies on `useMemo` hook.\n\nimport {createRoot} from \"react-dom/client\"\nimport type {FC} from \"react\"\n\nimport {SlateView} from \"slate-to-react\"\n\nconst App: FC = () =\u003e (\n  \u003cSlateView\n    nodes={[\n      type: \"p\",\n      children: [{\n        text: \"Hello, world!\"\n      }]\n    ]}\n  /\u003e\n)\n\nconst root = document.querySelector(\"#root\")\n\ncreateRoot(root).render(\u003cApp /\u003e)\n```\n\n**IMPORTANT**: Note that by default `slate-to-react` will generate a unique `id` for each node using [`nanoid`](https://github.com/ai/nanoid) to use it as `key` property of each rendered React component, which is not recommended as the `key` property **must** remain consistent between renders.\nYou can opt-out by enabling strict mode in `SlateView`, or `useSlateToReact`, or `transformNodes` options.\nWhen enabled, `NodeNoIdFieldError` will be thrown if any node without the `id` field is encountered.\n\n2. You can use `slate-to-react` with React Server Components too. For that use `transformNodes` function directly:\n\n```ts\nimport type {FC} from \"react\"\n\nimport type {Node} from \"slate-to-react\"\nimport {transformNodes} from \"slate-to-react\"\n\ninterface Props {\n  nodes: Node[]\n}\n\n// This could be a React Server Component\n// The `transformNodes` function returns a signle `ReactElement` node, so it's a valid result for Function Component.\n// Or you can put `transformNodes` call in to the other's component `children` property.\nconst MySlateView: FC\u003cProps\u003e = ({nodes}) =\u003e transformNodes(nodes)\n```\n\n3. You can also transform Slate nodes via [`useSlateToReact`](#useslatetoreactnodes-options) hook used inside `SlateView` component:\n\n```tsx\nimport {createRoot} from \"react-dom/client\"\nimport type {FC} from \"react\"\n\nimport {useSlateToReact} from \"slate-to-react\"\n\nconst App: FC = () =\u003e {\n  // This hook returns a signle ReactElement, so you can even return it from your component, no need for `React.Fragment` or any wrapper element.\n  const view = useSlateToReact([\n    id: \"1\",\n    type: \"p\",\n    children: [{\n      id: \"2\",\n      text: \"Hello, world!\"\n    }]\n  ])\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        Transformed Slate nodes:\n      \u003c/div\u003e\n\n      \u003cdiv\u003e\n        {view}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst root = document.querySelector(\"#root\")\n\ncreateRoot(root).render(\u003cApp /\u003e)\n```\n\n4. You can use [`transformNodes`](#transformnodesnodes-options) function directly in your client components as well:\n\n```tsx\n\"use client\"\n\nimport {createRoot} from \"react-dom/client\"\nimport type {FC} from \"react\"\nimport {useMemo} from \"react\"\n\nimport type {Node} from \"slate-to-react\"\nimport {transformNodes} from \"slate-to-react\"\n\ninterface MySlateViewProps {\n  nodes: Node[]\n}\n\nconst MySlateView: FC\u003cMySlateViewProps\u003e = ({nodes}) =\u003e {\n  const view = useMemo(() =\u003e transformNodes(nodes), [nodes])\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003ePost title\u003c/h1\u003e\n\n      \u003cdiv\u003e\n        {view}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst App: FC = () =\u003e (\n  \u003cMySlateView\n    nodes={[\n      id: \"1\",\n      type: \"p\",\n      children: [{\n        id: \"2\",\n        text: \"Hello, world!\"\n      }]\n    ]}\n  /\u003e\n)\n\nconst root = document.querySelector(\"#root\")\n\ncreateRoot(root).render(\u003cApp /\u003e)\n```\n\n5. You can define and use custom transforms to control the output for each node. For this example, let's define Link transformer. It will render [`next/link`](https://nextjs.org/docs/api-reference/next/link) component for website-own links and `\u003ca\u003e` tag for links to external resources:\n\n```tsx\n\"use client\"\n\nimport {\n  SlateView,\n  createElementNodeMatcher,\n  createElementTransform\n} from \"slate-to-react\"\n\nimport type {Node, Replace} from \"slate-to-react\"\nimport type {Text} from \"slate\"\nimport type {FC} from \"react\"\n\nimport NextLink from \"next/Link\"\n\nimport {isInternalUrl} from \"./utils/isInternalUrl.js\"\n\ntype Link = Replace\u003cNode\u003c\"a\"\u003e, {\n  url: string\n  children: Text[]\n}\u003e\n\n// First of all, we need a matcher for `Link` element node.\n// Node that slate-to-react has a bunch of builtin matchers, including `isLink`, so you can skip this step\nexport const isLink = createElementNodeMatcher\u003cLink\u003e(\n  (node): node is Link =\u003e (\n    node.type === \"a\" \u0026\u0026 typeof node.url === \"string\"\n  )\n)\n\n// Then define a transform for this element. Transform factory function takes two arguments:\n// 1. Node matcher. In this case that would be our `isLink` marcher, which implements `ElementMatcher` type.\n// 2. Transformer implementation. This function takes `ElementProps` as an argument, and should return `ReactElement` for this node.\nexport const Anchor = createElementTransform(\n  isLink,\n\n  ({key, element, attributes, children}) =\u003e (\n    isInternalUrl(element.url)\n      ? (\n        \u003cNextLink {...attributes} href={element.url} key={key}\u003e\n          {children}\n        \u003c/NextLink\u003e\n      )\n      : (\n        \u003ca {...attributes} href={element.url} rel=\"noopener noreferrer\" target=\"_blank\" key={key}\u003e\n          {children}\n        \u003c/a\u003e\n      )\n  )\n)\n\nexport const MyComponent: FC = () =\u003e (\n  \u003cSlateView\n    transforms={{\n      elements: [Anchor] // With that, `SlateView` component will render `Anchor` nodes using our own transform, instead of default.\n    }}\n    nodes={[\n      {\n        id: \"1\",\n        type: \"p\",\n        children: [{ // This node will be rendered as regular `\u003ca\u003e` tag because its url points to an external resource\n          id: \"2\",\n          type: \"a\",\n          url: \"https://example.com\",\n          children: [{\n            id: \"3\",\n            text: \"External link to example.com\"\n          }]\n        }]\n      },\n      {\n        id: \"4\",\n        type: \"p\",\n        children: [{ // This node will be rendered using `next/link` component, because it has an internal url\n          id: \"5\",\n          type: \"a\",\n          url: \"/about\",\n          children: [{\n            id: \"6\",\n            text: \"About page\"\n          }]\n        }]\n      }\n    ]}\n  /\u003e\n)\n```\n\n## API\n\n### `SlateView`\n\nReact component that will render given `nodes` as React elements.\n\nAvailable props listed in [`SlateViewProps`](#type-slateviewprops) interface section.\n\n### `useSlateToReact(nodes[, options])`\n\nReact hook that transforms given Slate nodes to React elements and memoizes the result.\n\nThis hook takes following arguments:\n\n| Name    | Type                                                   | Required  | Default | Description                        |\n|---------|:------------------------------------------------------:|:---------:|:-------:|------------------------------------|\n| nodes   | `Node[]`                                               | Yes       | —       | List of `Slate` nodes to transform |\n| options | [`TransformNodesOptions`](#type-transformnodesoptions) | No        | —       | Additional transform options       |\n\n### `transformNodes(nodes[, options])`\n\nTransforms given Slate `nodes` to react elements.\n\nThis function takes following arguments:\n\n| Name    | Type                                                   | Required  | Default | Description                        |\n|---------|:------------------------------------------------------:|:---------:|:-------:|------------------------------------|\n| nodes   | `Node[]`                                               | Yes       | —       | List of `Slate` nodes to transform |\n| options | [`TransformNodesOptions`](#type-transformnodesoptions) | No        | —       | Additional transform options       |\n\nReturns `ReactElement`. All nodes will be wrapped within `React.Fragment`, so you can even return them from your components as-is.\n\n### `createLeafNodeMatcher(matcher)`\n\nTakes `matcher` implementation as the first argument and applies proper types to given function. This will only be useful for TypeScript users. If you use JavaScript - you can write matcher without it, because matchers are just regular functions that returns `boolean`.\n\n| Name    | Type                     | Required  | Default | Description                                 |\n|---------|:------------------------:|:---------:|:-------:|---------------------------------------------|\n| matcher | `LeafNodeMatcher\u003cTLeaf\u003e` | Yes       | —       | A `LeafNodeMatcher` implementation function |\n\nReturns `LeafNodeMatcher\u003cTLeaf\u003e` matcher, where `TLeaf` type parameter defaults to Slate's `Text` node. Because `crateLeafNodeMatcher` is a generic function, it will use actual `TLeaf` type depending on what you give as type parameter.\n\nNow let's create a `RichText` matcher, just for a quick demonstration:\n\n```ts\nimport type {Text} from \"slate\"\n\nimport {createLeafNodeMatcher} from \"slate-to-react\"\n\nexport interface RichText extends Text {\n  bold?: boolean\n  italic?: boolean\n  underline?: boolean\n  strikethrough?: boolean\n  superscript?: boolean\n  subscript?: boolean\n  code?: boolean\n}\n\nexport const isRichText = createLeafNodeMatcher\u003cRichText\u003e(\n  (node): node is RichText =\u003e (\n    typeof node.text === \"string\" \u0026\u0026 !!(\n      typeof node.bold === \"boolean\"\n        || typeof node.italic === \"boolean\"\n        || typeof node.strikethrough === \"boolean\"\n        || typeof node.underline === \"boolean\"\n        || typeof node.code === \"boolean\"\n        || typeof node.superscript === \"boolean\"\n        || typeof node.subscript === \"boolean\"\n    )\n  )\n)\n```\n\nThis `isRichText` matcher will match only `Text` nodes that have at least one of text formatting property from `RichText` interface.\n\nNote how we call `createLeafMatcher` with explicit `RichText` type parameter. That way the implementation will get proper types for `node` argument.\n\nIt is also important to mention that `matcher` implementation **must** return `node is LeafProps\u003cTLeaf\u003e` and not just `boolean`. In our case `TLeaf` will be `RichText`.\n\n### `createElementNodeMatcher(matcher)`\n\nThis is similar to `createLeafNodeMarcher`, but applies types for `ElementNodeMatcher` to given implementation.\n\n| Name    | Type                           | Required  | Default | Description                                     |\n|---------|:------------------------------:|:---------:|:-------:|-------------------------------------------------|\n| matcher | `ElementNodeMatcher\u003cTElement\u003e` | Yes       | —       | An `ElementNodeMatcher` implementation function |\n\nReturns `ElementNodeMatcher\u003cTElement\u003e` matcher, where `TElement` defaults to `Node\u003cstring\u003e` which inherits Slate's `Element` type.\n\nLet's now make a simple `Link` matcher as the example:\n\n```ts\nimport {createElementNodeMatcher} from \"slate-to-react\"\nimport type {Node, Replace} from \"slate-to-react\"\n\nimport {Text} from \"slate\"\n\nexport type Link = Replace\u003cNode, {\n  children: Text[]\n}\u003e\n\nexport const isLink = createElementNodeMatcher\u003cLink\u003e(\n  (node): node is Link =\u003e (\n    node.type === \"a\" \u0026\u0026 typeof node.url === \"string\"\n  )\n)\n```\n\n### `createLeafTransform(matcher, transform)`\n\nCreates a leaf node transform. It takes `LeafNodeMatcher` as the first argument to match any specific node during `transformNodes` call, and `transform` implementation as the second argument. This transform implementation then will be called for each matched node to create a `ReactElement` for this node.\n\n| Name      | Type                             | Required  | Default | Description                                          |\n|-----------|:--------------------------------:|:---------:|:-------:|------------------------------------------------------|\n| matcher   | `LeafNodeMatcher\u003cTLeaf\u003e`         | Yes       | —       | A `LeafNodeMatcher` implementation function          |\n| transform | `TransformImplementation\u003cTLeaf\u003e` | Yes       | —       | Transform implementation to render matched node with |\n\nReturns `LeafTransform\u003cTLeaf\u003e`, where `TLeaf` type parameter defaults to Slate's `Text` node. The actual value will be infered from `TLeafMatcher` type, so that `transform` implementation will get proper types for it `props` argument.\n\nFor this example, let's implement a transform for `RichText` node.\n\n```tsx\nimport {createLeafTransform} from \"slate-to-react\"\n\n// These were implemented at one of examples above.\nimport type {RichText} from \"./matcher/isRichText.js\"\nimport {isRichText} from \"./matcher/isRichText.js\"\n\nexport const RichText = createLeafTransform(\n  isRichText,\n\n  ({key, attributes, leaf, children}) =\u003e {\n    // Render \u003cbr /\u003e for empty text blocks as it's probably just an empty line\n    if (!children) {\n      return \u003cbr {...attributes} /\u003e\n    }\n\n    let element: ReactNode = children\n\n    if (leaf.bold) {\n      element = \u003cstrong\u003e{element}\u003c/strong\u003e\n    }\n\n    if (leaf.italic) {\n      element = \u003ci\u003e{element}\u003c/i\u003e\n    }\n\n    if (leaf.underline) {\n      element = \u003cu\u003e{element}\u003c/u\u003e\n    }\n\n    if (leaf.strikethrough) {\n      element = \u003cs\u003e{element}\u003c/s\u003e\n    }\n\n    if (leaf.superscript) {\n      element = \u003csup\u003e{element}\u003c/sup\u003e\n    } else if (leaf.subscript) {\n      element = \u003csub\u003e{element}\u003c/sub\u003e\n    }\n\n    if (leaf.code) {\n      element = \u003ccode\u003e{element}\u003c/code\u003e\n    }\n\n    return \u003cspan {...attributes} key={key}\u003e{element}\u003c/span\u003e\n  }\n)\n```\n\n### `createElementTransform(matcher, transform)`\n\nCreates an element node transform. It takes `ElementNodeMatcher` as the first argument to match any specific node during `transformNodes` call, and `transform` implementation as the second argument. This transform implementation then will be called for each matched node to create a `ReactElement` for this node.\n\n| Name      | Type                                | Required  | Default | Description                                          |\n|-----------|:-----------------------------------:|:---------:|:-------:|------------------------------------------------------|\n| matcher   | `ElementNodeMatcher\u003cTElement\u003e`      | Yes       | —       | An `ElementNodeMatcher` implementation function      |\n| transform | `TransformImplementation\u003cTElement\u003e` | Yes       | —       | Transform implementation to render matched node with |\n\nReturns `ElementTransform\u003cTElement\u003e`, where `TElement` defaults to `Node\u003cstring\u003e` which inherits Slate's `Element` type.\n\nFollowing example implements a transform for `Link` type:\n\n```tsx\nimport {createElementTransform} from \"slate-to-react\"\n\n// These were implemented at one of examples above.\nimport {isLink} from \"./matcher/isLink.js\"\n\nexport const Link = createElementTransform(\n  isLink,\n\n  ({key, attributes, element, children}) =\u003e (\n    \u003ca {...attributes} href={element.url} key={key}\u003e\n      {children}\n    \u003c/a\u003e\n  )\n)\n```\n\n### `isText(node)`\n\nMatches `Text` nodes, with or without formatting.\n\n| Name       | Type   | Required  | Default | Description                         |\n|------------|:------:|:---------:|:-------:|-------------------------------------|\n| node       | `Text` | Yes       | —       | A Slate `Leaf` node to test         |\n\nReturns `true` when given node is a `Text` node.\n\n### `isParagraph(node)`\n\nMatches `Paragraph` nodes.\n\n| Name       | Type        | Required  | Default | Description                         |\n|------------|:-----------:|:---------:|:-------:|-------------------------------------|\n| node       | `Paragraph` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Paragraph` node.\n\n### `isLink(node)`\n\nMatches `Link` nodes.\n\n| Name       | Type   | Required  | Default | Description                         |\n|------------|:------:|:---------:|:-------:|-------------------------------------|\n| node       | `Link` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Link` node.\n\n### `isBlockquote(node)`\n\nMatches `Blockqoute` nodes.\n\n| Name       | Type         | Required  | Default | Description                         |\n|------------|:------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Blockquote` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Blockqoute` node.\n\n### `isHeading(node)`\n\nMatches `Heading` nodes of every valid level (H1-H6).\n\n| Name       | Type      | Required  | Default | Description                         |\n|------------|:---------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading` node.\n\n### `isH1(node)`\n\nMatches `H1` heading nodes.\n\n| Name       | Type            | Required  | Default | Description                         |\n|------------|:---------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading\u003c\"h1\"\u003e` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading\u003c\"h1\"\u003e` node.\n\n### `isH2(node)`\n\nMatches `H2` heading nodes.\n\n| Name       | Type            | Required  | Default | Description                         |\n|------------|:---------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading\u003c\"h2\"\u003e` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading\u003c\"h2\"\u003e` node.\n\n### `isH3(node)`\n\nMatches `H3` heading nodes.\n\n| Name       | Type             | Required  | Default | Description                         |\n|------------|:----------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading\u003c\u003c\"h3\"\u003e` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading\u003c\"h3\"\u003e` node.\n\n### `isH4(node)`\n\nMatches `H4` heading nodes.\n\n| Name       | Type            | Required  | Default | Description                         |\n|------------|:---------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading\u003c\"h4\"\u003e` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading\u003c\"h4\"\u003e` node.\n\n### `isH5(node)`\n\nMatches `H5` heading nodes.\n\n| Name       | Type            | Required  | Default | Description                         |\n|------------|:---------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading\u003c\"h5\"\u003e` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading\u003c\"h5\"\u003e` node.\n\n### `isH6(node)`\n\nMatches `H6` heading nodes.\n\n| Name       | Type            | Required  | Default | Description                         |\n|------------|:---------------:|:---------:|:-------:|-------------------------------------|\n| node       | `Heading\u003c\"h6\"\u003e` | Yes       | —       | A Slate `Element` node to test      |\n\nReturns `true` when given node is a `Heading\u003c\"h6\"\u003e` node.\n\n### `type Node\u003cT\u003e`\n\nStricten extension on top of Slate's `Element` type. It replaces its `children` with a self-reference list of `Node` and adds `type` property which takes the type of `T` parameter.\n\n| Name | Extends     | Required  | Default  | Description                               |\n|------|:-----------:|:---------:|:--------:|-------------------------------------------|\n| T    | `string`    | No        | `string` | A type parameter for Node `type` property |\n\n### `type Replace\u003cL, R\u003e`\n\nReplaces object properties in the `L` (target) object with the ones from the `R` (source)\n\n| Name | Extends     | Required  | Default  | Description                                                                      |\n|------|:-----------:|:---------:|:--------:|----------------------------------------------------------------------------------|\n| L    | `object`    | Yes       | —        | Target object which properties are to be replaced using Source object            |\n| R    | `object`    | Yes       | —        | Source object which properties will replace and extend the ones on Target object |\n\n### `interface Transforms`\n\nCustom transform lists.\n\n| Name     | Type                 | Required  | Default  | Description                               |\n|----------|:--------------------:|:---------:|:--------:|-------------------------------------------|\n| leaves   | `LeafTransform[]`    | No        | `[]`     | A list of transforms for `leaf` nodes     |\n| elements | `ElementTransform[]` | No        | `[]`     | A list of transforms for `element` nodes  |\n\n### `type TransformNodesOptions`\n\nAdditional transform options.\n\n| Name              | Type                                  | Required | Default                                           | Description                                                  |\n|-------------------|:-------------------------------------:|:--------:|:-------------------------------------------------:|--------------------------------------------------------------|\n| defaultTransforms | `boolean`                             | No       | `true`                                            | Controls whether default transforms enabled or not           |\n| transforms        | [`Transforms`](#interface-transforms) | No       | `undefined`                                       | Custom transforms for `Slate` nodes                          |\n| strict            | `boolean`                             | No       | `false`                                           | Enables strict mode                                          |\n| idKeyName         | `string`                              | No       | `\"id\"`                                            | The name of the id property on nodes                         |\n| forceGenerateId   | `boolean`                             | No       | `false`                                           | If `true`, the id for key attribute will be always generated |\n| idGenerator       | `() =\u003e string`                        | No       | [`nanoid`](https://github.com/ai/nanoid#blocking) | Custom implementation for ID generator                       |\n\n### `type SlateViewProps`\n\nAvailable props for `SlateView` component. Inherits [`TransformNodesOptions`](#type-transformnodesoptions).\n\n| Name  | Type     | Required  | Default  | Description                               |\n|-------|:--------:|:---------:|:--------:|-------------------------------------------|\n| nodes | `Node[]` | Yes       | —        | List of `Slate` nodes to transform        |\n\n### Default transforms\n\nBy default `slate-to-react` has default transforms for following nodes:\n\n* PlainText - transforms **only** text nodes **without** formatting into `\u003cspan\u003e` HTML tag;\n* RichText - transfomrs **only** text nodes **with** at least one of the formatting property into corresponding formatting HTML tag (e. g. `\u003cstrong\u003e` for **bold**, `\u003ci\u003e` for *italic* etc.) wrapped with `\u003cspan\u003e` HTML tag;\n* EmptyText - transforms **only** empty `Text` nodes into `\u003cbr\u003e` HTML tag;\n* Paragraph - transforms `Paragraph` nodes into `\u003cp\u003e` HTML tag;\n* Link - transforms `Link` nodes into `\u003ca\u003e` HTML tag;\n* Blockqoute - transforms `Blockqoute` nodes into `\u003cblockqoute\u003e` HTML tag;\n* Heading - transforms `Heading` nodes into `h\u003clevel\u003e` HTML tag with corresponding `level` (e. g. `\u003ch1\u003e`, `\u003ch2\u003e`, `\u003ch3\u003e`, `\u003ch4\u003e`, `\u003ch5\u003e`, `\u003ch6\u003e`).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foctet-stream%2Fslate-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foctet-stream%2Fslate-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foctet-stream%2Fslate-to-react/lists"}