# react-portable-text > An easy way to render Portable Text block content in React applications. Latest version **0.6.0** (published 2023-01-20) · MPL-2.0 license · 0 weekly downloads ## Install ```sh npm install react-portable-text pnpm add react-portable-text yarn add react-portable-text bun add react-portable-text ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned. ## Facts | | | |---|---| | Version | 0.6.0 | | Published | 2023-01-20 | | First published | 2021-02-19 | | Weekly downloads | 0 | | License | MPL-2.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 13.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 74 | | Author | Corey Ward | | Maintainers | coreyward | ## Links - npm: https://www.npmjs.com/package/react-portable-text - Repository: https://github.com/coreyward/react-portable-text - npm.io page: https://npm.io/package/react-portable-text ## Dependencies (1) - [@sanity/block-content-to-react](https://npm.io/package/@sanity/block-content-to-react.md) ^3.0.0 ## Recent versions - 0.6.0 (latest) — 2023-01-20 - 0.5.1 — 2022-08-24 - 0.5.0 — 2022-08-24 - 0.4.3 — 2022-01-21 - 0.4.2 — 2022-01-21 - 0.4.1 — 2022-01-21 - 0.4.0 — 2021-10-27 - 0.4.0-alpha.0 — 2021-10-15 - 0.3.0 — 2021-03-29 - 0.2.4 — 2021-03-23 - 0.2.3 — 2021-02-26 - 0.2.2 — 2021-02-26 - 0.2.1 — 2021-02-26 - 0.2.0 — 2021-02-20 - 0.1.2 — 2021-02-20 - … 2 more at https://npm.io/package/react-portable-text/versions ## README # React Portable Text [![Latest version](https://img.shields.io/npm/v/react-portable-text?label=version&color=brightGreen&logo=npm)](https://www.npmjs.com/package/react-portable-text) [![Open issues](https://img.shields.io/github/issues/coreyward/react-portable-text)](https://github.com/coreyward/react-portable-text/issues) An easy way to render Portable Text block content in React applications. ## Quick Example ```sh yarn add react-portable-text ``` ```jsx import PortableText from "react-portable-text" const YourComponent = ({ portableTextContent }) => (

, li: ({ children }) =>
  • {children}
    • , someCustomType: YourComponent, }} />

    ) ``` ## Why not just use @sanity/block-content-to-react directly? I found it difficult to create abstractions on top of [@sanity/block-content-to-react](https://github.com/sanity-io/block-content-to-react). Remembering whether a serializer needed to be codified as a `type`, a `mark`, or as something under `block` was challenging, and the special treatment for lists and list items was confusing. Further, the props being wrapped in an object under the `node` property, or extraneous props for `mark` types meant I was creating intermediate component types just to avoid passing invalid props to the React elements (otherwise they render in the DOM). React Portable Text uses `@sanity/block-content-to-react` under the hood, but maps each of these types to the correct place in the serializers for you and normalizing props to match the fields supplied by users in your Sanity Studio, simplifying the cognitive load required to author new ones. ## Serializer Documentation React Portable Text maps the following types explicitly, and treats all other properties of the `serializers` object as custom types. Custom types are used for both `type` and `block` blocks (i.e. custom marks as well as custom block-level insertion types). | Serializer | Notes | | ----------------- | ---------------------------------------------------------------------------------------- | | **Marks** | | `link` | All `link` marks used for anchor links | | `strong` | Bold/strong text | | `em` | Emphasized/italic text | | `underline` | Underlined text | | `del` | Text with strikethrough styles | | `code` | Inline text with `code styling` | | **Lists** | | `ul` | Unordered lists | | `ol` | Ordered lists | | `li` | List items for any type of list | | **Blocks** | | `h1` | Heading level 1 | | `h2` | Heading level 2 | | `h3` | Heading level 3 | | `h4` | Heading level 4 | | `h5` | Heading level 5 | | `h6` | Heading level 6 | | `normal` | Paragraph styles | | `blockquote` | Blockquote styles | | **Special Types** | | | `container` | Override the component wrapping the blocks | | `block` | Override the default block serializer (not recommended) | | `span` | Override the default span serializer (not recommended) | | `hardBreak` | Serializer for newlines; defaults to `br`; pass `false` to preserve newlines | | `unknownType` | Fallback for blocks of unknown type, if `ignoreUnknownTypes` is set to `false` (default) | | `unknownMark` | Fallback for marks of unknown type; defaults to a plain `span` | ### Additional Props Additional props are passed through to `@sanity/block-content-to-react`, so if you want to configure `imageOptions` or set the `projectId` and `dataset` options you can just pass them directly to React Portable Text: ```jsx ``` ## Rendering Plain Text As a bonus, `react-portable-text` offers a function that will render your portable text content to a plaintext string. This is often useful for previews and such in the Studio and for ancillary uses of content in contexts where formatting is not supported (e.g. calendar invite descriptions, meta tags, etc.). ```jsx import { blockContentToPlainText } from "react-portable-text" const MetaDescription = ({ content }) => ( ) ``` ## Contributing Did I miss something? Is something not compatible with your setup? [Open an issue](https://github.com/coreyward/react-portable-text/issues/new) with details, and if possible, a CodeSandbox reproduction. Pull requests are also welcomed! ## License Copyright ©2022 Corey Ward. Available under the [MIT License](https://github.com/coreyward/react-portable-text/blob/master/LICENSE). --- _Source: https://npm.io/package/react-portable-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._