{"id":15046887,"url":"https://github.com/moxystudio/react-contentful-rich-text","last_synced_at":"2025-10-28T19:31:45.688Z","repository":{"id":42882452,"uuid":"255926950","full_name":"moxystudio/react-contentful-rich-text","owner":"moxystudio","description":"A react component that transforms a contentful rich text structure to html.","archived":false,"fork":false,"pushed_at":"2023-01-06T04:36:20.000Z","size":3074,"stargazers_count":3,"open_issues_count":25,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-25T03:04:48.238Z","etag":null,"topics":["base","react"],"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/moxystudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-15T13:35:06.000Z","updated_at":"2022-09-05T13:25:54.000Z","dependencies_parsed_at":"2023-02-05T08:15:53.629Z","dependency_job_id":null,"html_url":"https://github.com/moxystudio/react-contentful-rich-text","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":"moxystudio/react-lib-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Freact-contentful-rich-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Freact-contentful-rich-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Freact-contentful-rich-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Freact-contentful-rich-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moxystudio","download_url":"https://codeload.github.com/moxystudio/react-contentful-rich-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219875834,"owners_count":16554708,"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":["base","react"],"created_at":"2024-09-24T20:53:42.477Z","updated_at":"2025-10-28T19:31:45.250Z","avatar_url":"https://github.com/moxystudio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-contentful-rich-text\n\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]\n\n[npm-url]:https://npmjs.org/package/@moxy/react-contentful-rich-text\n[downloads-image]:https://img.shields.io/npm/dm/@moxy/react-contentful-rich-text.svg\n[npm-image]:https://img.shields.io/npm/v/@moxy/react-contentful-rich-text.svg\n[build-status-url]:https://github.com/moxystudio/react-contentful-rich-text/actions\n[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/react-contentful-rich-text/Node%20CI/master\n[codecov-url]:https://codecov.io/gh/moxystudio/react-contentful-rich-text\n[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/react-contentful-rich-text/master.svg\n[david-dm-url]:https://david-dm.org/moxystudio/react-contentful-rich-text\n[david-dm-image]:https://img.shields.io/david/moxystudio/react-contentful-rich-text.svg\n[david-dm-dev-url]:https://david-dm.org/moxystudio/react-contentful-rich-text?type=dev\n[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/react-contentful-rich-text.svg\n\nA react component that transforms a contentful rich text structure to HTML.\n\n## Installation\n\n```sh\n$ npm install @moxy/react-contentful-rich-text\n```\n\nThis library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.\n\n## Motivation\n\nContent Management Systems (CMS) usually provide a custom text field that lets users define headings, font styles, lists, quotes, links, assets and many more.\n\nEach CMS provides this rich text in a specific format, usually a data structure in json, to be interpreted. Contentful is one of those content management systems.\n\nIn common use cases, rich text data must be represented as HTML. Based on this use cases, there should be an easier way to render Contentful rich text as HTML.\n\n## Usage\n\n```js\nimport React from 'react';\nimport RichText from '@moxy/react-contentful-rich-text';\n\nconst ContentType1 = ({ inline, data }) =\u003e (\n    \u003cdiv\u003e\n        \u003ch2\u003e{ data.fields.title }\u003c/h2\u003e\n        \u003cp\u003e{ data.fields.description }\u003c/p\u003e\n    \u003c/div\u003e\n);\n\nconst entryMap = {\n    myContentType1: ContentType1,\n};\n\nconst MyComponent = ({ richTextField }) =\u003e (\n    \u003cdiv className=\"container\"\u003e\n        \u003cRichText data={ richTextField } entryMap={ entryMap }/\u003e\n    \u003c/div\u003e\n);\n\nexport default MyComponent;\n```\n\nImport the styleguide base styles in the app's entry CSS file:\n\n```css\n@import \"@moxy/react-contentful-rich-text/dist/index.css\";\n```\n\n..or in your entry JavaScript file:\n\n```js\nimport '@moxy/react-contentful-rich-text/dist/index.css';\n```\n\n## Styling\n\nEach HTML element will be rendered with a data attribute `data-type` to provide an easier way to style them.\n\n```css\n.myReactContentfulRichText {\n    \u0026 [data-type=\"paragraph\"] {\n        margin: 1em 0;\n    }\n\n    \u0026 [data-type=\"text\"] {\n        font-size: 14px;\n    }\n\n    \u0026 [data-type=\"heading-1\"] { ... }\n    \u0026 [data-type=\"heading-2\"] { ... }\n    \u0026 [data-type=\"heading-3\"] { ... }\n    \u0026 [data-type=\"heading-4\"] { ... }\n    \u0026 [data-type=\"heading-5\"] { ... }\n    \u0026 [data-type=\"heading-6\"] { ... }\n    \n    \u0026 [data-type=\"bold\"] { ... }\n    \u0026 [data-type=\"italic\"] { ... }\n    \u0026 [data-type=\"underline\"] { ... }\n    \u0026 [data-type=\"code\"] { ... }\n    \u0026 [data-type=\"multi-code\"] { ... }\n    \n    \u0026 [data-type=\"unordered-list\"] { ... }\n    \u0026 [data-type=\"ordered-list\"] { ... }\n    \u0026 [data-type=\"list-item\"] { ... }\n    \n    \u0026 [data-type=\"hyperlink\"] { ... }\n    \u0026 [data-type=\"asset-hyperlink\"] { ... }\n    \u0026 [data-type=\"email-hyperlink\"] { ... }\n    \n    \u0026 [data-type=\"blockquote\"] { ... }\n    \u0026 [data-type=\"thematic-break\"] { ... }\n    \n    \u0026 [data-type=\"image\"] { ... }\n    \u0026 [data-type=\"video\"] { ... }\n}\n```\n\n## API\n\nThe following props are available for the `RichText` component.\n\n#### data\n\nType: `object` | Required: `false`\n\nRich text field value.\n\nExample:\n```js\n{\n    \"nodeType\": \"document\",\n    \"data\": {},\n    \"content\": [...],\n}\n```\n\n#### entryMap\n\nType: `object` | Required: `false`\n\nMap of Contentful content types to react components. Required to render embedded entries.\n\nExample:\n\n```js\n{\n    myContentType1: ContentType1\n    myContentType2: ContentType2\n}\n```\n\nWhere `myContentType#` is the id of a content type and `ContentType#` is a react component that will receive the data from an entry of that content type.\n\nThe react component will also receive a boolean `inline` prop that details if an embedded entry should be rendered inline.\n\n#### className\n\nType: `string` | Required: `false`\n\nA className to apply to the component.\n\n## Tests\n\n```sh\n$ npm test\n$ npm test -- --watch # during development\n```\n\n## Demo\n\nA demo [Next.js](https://nextjs.org/) project is available in the [`/demo`](./demo) folder so you can try out this component.\n\nFirst, build the `react-contentful-rich-text` project with:\n\n```sh\n$ npm run build\n```\n\nTo run the demo, do the following inside the demo's folder:\n\n```sh\n$ npm i\n$ npm run dev\n```\n\n*Note: Everytime a change is made to the package a rebuild is required to reflect those changes on the demo.*\n\n## FAQ\n\n### I can't override the component's CSS, what's happening?\n\nThere is an ongoing [next.js issue](https://github.com/zeit/next.js/issues/10148) about the loading order of modules and global CSS in development mode. This has been fixed in [v9.3.6-canary.0](https://github.com/zeit/next.js/releases/tag/v9.3.6-canary.0), so you can either update `next.js` to a version higher than `v9.3.5`, or simply increase the CSS specificity when overriding component's classes, as we did in the [`demo`](./demo/pages/index.module.css), e.g. having the page or section CSS wrap the component's one.\n\n## License\n\nReleased under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoxystudio%2Freact-contentful-rich-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoxystudio%2Freact-contentful-rich-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoxystudio%2Freact-contentful-rich-text/lists"}