{"id":17374153,"url":"https://github.com/coreyward/react-portable-text","last_synced_at":"2025-04-04T10:05:38.964Z","repository":{"id":37945068,"uuid":"340532527","full_name":"coreyward/react-portable-text","owner":"coreyward","description":"An easy way to render Portable Text block content in React applications.","archived":false,"fork":false,"pushed_at":"2025-03-06T00:37:48.000Z","size":219,"stargazers_count":73,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T09:04:36.016Z","etag":null,"topics":["block-content","portable-text","react","reactjs","sanity","sanity-io","serialization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/coreyward.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":"2021-02-20T01:30:24.000Z","updated_at":"2025-02-09T16:23:32.000Z","dependencies_parsed_at":"2024-06-18T15:35:27.628Z","dependency_job_id":"fd2f67a4-b603-4a0d-a60b-78837c7106a7","html_url":"https://github.com/coreyward/react-portable-text","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyward%2Freact-portable-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyward%2Freact-portable-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyward%2Freact-portable-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coreyward%2Freact-portable-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coreyward","download_url":"https://codeload.github.com/coreyward/react-portable-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247156347,"owners_count":20893197,"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":["block-content","portable-text","react","reactjs","sanity","sanity-io","serialization"],"created_at":"2024-10-16T03:04:15.374Z","updated_at":"2025-04-04T10:05:38.939Z","avatar_url":"https://github.com/coreyward.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Portable Text\n\n[![Latest version](https://img.shields.io/npm/v/react-portable-text?label=version\u0026color=brightGreen\u0026logo=npm)](https://www.npmjs.com/package/react-portable-text)\n[![Open issues](https://img.shields.io/github/issues/coreyward/react-portable-text)](https://github.com/coreyward/react-portable-text/issues)\n\nAn easy way to render Portable Text block content in React applications.\n\nWant to display images from Sanity in your Portable Text content? Check out\n[sanity-image](https://github.com/coreyward/sanity-image). No extra fields\nrequired in your GROQ query.\n\n## Quick Example\n\n```sh\nyarn add react-portable-text\n```\n\n```jsx\nimport PortableText from \"react-portable-text\"\n\nconst YourComponent = ({ portableTextContent }) =\u003e (\n  \u003cdiv\u003e\n    \u003cPortableText\n      // Pass in block content straight from Sanity.io\n      content={portableTextContent}\n      // Optionally override marks, decorators, blocks, etc. in a flat\n      // structure without doing any gymnastics\n      serializers={{\n        h1: (props) =\u003e \u003ch1 style={{ color: \"red\" }} {...props} /\u003e,\n        li: ({ children }) =\u003e \u003cli className=\"special-list-item\"\u003e{children}\u003c/li\u003e,\n        someCustomType: YourComponent,\n      }}\n    /\u003e\n  \u003c/div\u003e\n)\n```\n\n## Why not just use @sanity/block-content-to-react directly?\n\nI found it difficult to create abstractions on top of\n[@sanity/block-content-to-react](https://github.com/sanity-io/block-content-to-react).\nRemembering whether a serializer needed to be codified as a `type`, a `mark`, or\nas something under `block` was challenging, and the special treatment for lists\nand list items was confusing. Further, the props being wrapped in an object\nunder the `node` property, or extraneous props for `mark` types meant I was\ncreating intermediate component types just to avoid passing invalid props to the\nReact elements (otherwise they render in the DOM).\n\nReact Portable Text uses `@sanity/block-content-to-react` under the hood, but\nmaps each of these types to the correct place in the serializers for you and\nnormalizing props to match the fields supplied by users in your Sanity Studio,\nsimplifying the cognitive load required to author new ones.\n\n## Serializer Documentation\n\nReact Portable Text maps the following types explicitly, and treats all other\nproperties of the `serializers` object as custom types. Custom types are used\nfor both `type` and `block` blocks (i.e. custom marks as well as custom\nblock-level insertion types).\n\n| Serializer        | Notes                                                                                    |\n| ----------------- | ---------------------------------------------------------------------------------------- |\n| **Marks**         |\n| `link`            | All `link` marks used for anchor links                                                   |\n| `strong`          | Bold/strong text                                                                         |\n| `em`              | Emphasized/italic text                                                                   |\n| `underline`       | Underlined text                                                                          |\n| `del`             | Text with strikethrough styles                                                           |\n| `code`            | Inline text with `code styling`                                                          |\n| **Lists**         |\n| `ul`              | Unordered lists                                                                          |\n| `ol`              | Ordered lists                                                                            |\n| `li`              | List items for any type of list                                                          |\n| **Blocks**        |\n| `h1`              | Heading level 1                                                                          |\n| `h2`              | Heading level 2                                                                          |\n| `h3`              | Heading level 3                                                                          |\n| `h4`              | Heading level 4                                                                          |\n| `h5`              | Heading level 5                                                                          |\n| `h6`              | Heading level 6                                                                          |\n| `normal`          | Paragraph styles                                                                         |\n| `blockquote`      | Blockquote styles                                                                        |\n| **Special Types** |                                                                                          |\n| `container`       | Override the component wrapping the blocks                                               |\n| `block`           | Override the default block serializer (not recommended)                                  |\n| `span`            | Override the default span serializer (not recommended)                                   |\n| `hardBreak`       | Serializer for newlines; defaults to `br`; pass `false` to preserve newlines             |\n| `unknownType`     | Fallback for blocks of unknown type, if `ignoreUnknownTypes` is set to `false` (default) |\n| `unknownMark`     | Fallback for marks of unknown type; defaults to a plain `span`                           |\n\n### Additional Props\n\nAdditional props are passed through to `@sanity/block-content-to-react`, so if\nyou want to configure `imageOptions` or set the `projectId` and `dataset`\noptions you can just pass them directly to React Portable Text:\n\n```jsx\n\u003cPortableText\n  content={blockContent}\n  projectId={process.env.SANITY_PROJECT_ID}\n  dataset={process.env.SANITY_DATASET}\n/\u003e\n```\n\n## Rendering Plain Text\n\nAs a bonus, `react-portable-text` offers a function that will render your\nportable text content to a plaintext string. This is often useful for previews\nand such in the Studio and for ancillary uses of content in contexts where\nformatting is not supported (e.g. calendar invite descriptions, meta tags,\netc.).\n\n```jsx\nimport { blockContentToPlainText } from \"react-portable-text\"\n\nconst MetaDescription = ({ content }) =\u003e (\n  \u003cmeta name=\"description\" content={blockContentToPlainText(content)} /\u003e\n)\n```\n\n## Contributing\n\nDid I miss something? Is something not compatible with your setup?\n[Open an issue](https://github.com/coreyward/react-portable-text/issues/new)\nwith details, and if possible, a CodeSandbox reproduction. Pull requests are\nalso welcomed!\n\n## License\n\nCopyright ©2022 Corey Ward. Available under the\n[MIT License](https://github.com/coreyward/react-portable-text/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreyward%2Freact-portable-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoreyward%2Freact-portable-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoreyward%2Freact-portable-text/lists"}