{"id":15020470,"url":"https://github.com/xennis/react-notion-render","last_synced_at":"2025-04-09T19:50:41.076Z","repository":{"id":241402540,"uuid":"805142309","full_name":"Xennis/react-notion-render","owner":"Xennis","description":"Use Notion as a headless CMS for your React (e.g. Next.js) website.","archived":false,"fork":false,"pushed_at":"2025-04-04T09:09:39.000Z","size":216,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T10:23:33.432Z","etag":null,"topics":["cms","nextjs","notion","notion-api","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://xennis.github.io/react-notion-render/","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/Xennis.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":"2024-05-24T01:02:31.000Z","updated_at":"2025-04-04T09:09:42.000Z","dependencies_parsed_at":"2024-06-07T10:13:54.462Z","dependency_job_id":"d88dfd41-6128-4736-883b-5e4819a47e3b","html_url":"https://github.com/Xennis/react-notion-render","commit_stats":{"total_commits":90,"total_committers":2,"mean_commits":45.0,"dds":"0.011111111111111072","last_synced_commit":"284d2a7abebbda61fc0f6d18d6bdfcc57eecf48b"},"previous_names":["xennis/react-notion-render"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xennis%2Freact-notion-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xennis%2Freact-notion-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xennis%2Freact-notion-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xennis%2Freact-notion-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Xennis","download_url":"https://codeload.github.com/Xennis/react-notion-render/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103932,"owners_count":21048244,"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":["cms","nextjs","notion","notion-api","react","tailwindcss"],"created_at":"2024-09-24T19:55:07.132Z","updated_at":"2025-04-09T19:50:41.052Z","avatar_url":"https://github.com/Xennis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-notion-render\n\n**[Demo](https://xennis.github.io/react-notion-render/)**\n\nRenders the JSON response of the official Notion API as React components. Styling is done via Tailwind CSS.\n\n# Features\n\n- ✅ Render the response of the _official_ Notion API\n- ✅ Resolving links\n- ✅ Downloading images uploaded to Notion\n- ✅ No JavaScript dependencies (except for React itself)\n- Internationalization:\n - ✅ `formatDateFn` allows to consider locale\n - ✅ RTL direction is supported\n- ✅ Dark mode is supported\n\nCheckout the [Demo](https://xennis.github.io/react-notion-render/).\n\n## Packages\n\n| Package dir | NPM version | Size |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `fetch` | [![NPM version](https://img.shields.io/npm/v/@xennis/react-notion-cms-fetch.svg)](https://www.npmjs.com/package/@xennis/react-notion-cms-fetch) | [![NPM bundle size](https://img.shields.io/bundlephobia/minzip/@xennis/react-notion-cms-fetch.svg)](https://bundlephobia.com/package/@xennis/react-notion-cms-fetch) |\n| `render` | [![NPM version](https://img.shields.io/npm/v/@xennis/react-notion-cms-render.svg)](https://www.npmjs.com/package/@xennis/react-notion-cms-render) | [![NPM bundle size](https://img.shields.io/bundlephobia/minzip/@xennis/react-notion-cms-render.svg)](https://bundlephobia.com/package/@xennis/react-notion-cms-render) |\n\n## Installation\n\n```shell\n# Add the render package\nnpm install @xennis/react-notion-cms-render\n# (Optional) Add the fetch package\nnpm install @xennis/react-notion-cms-fetch\n```\n\nNext, add the package to you Tailwind CSS config:\n\n```diff\nimport type { Config } from \"tailwindcss\"\n\nconst config: Config = {\n content: [\n \"./src/components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./src/app/**/*.{js,ts,jsx,tsx,mdx}\",\n+ \"./node_modules/@xennis/react-notion-cms-render/**/*.{js,jsx}\",\n ],\n}\nexport default config\n```\n\n## Usage\n\n```tsx\nimport { Client } from \"@notionhq/client\"\nimport { fetchBlocksChildren, Render } from \"@xennis/react-notion-cms-render\"\nimport \"@xennis/react-notion-cms-render/dist/styles.css\"\n\nconst client = new Client({ auth: \"\u003cNOTION AUTH TOKEN\u003e\" })\n\nconst blocks = await fetchBlocksChildren(client, { block_id: \"\u003cBLOCK UUID\u003e\" })\n\nconst component = \u003cRender blocks={blocks} /\u003e\n```\n\nA working example can be found in the [example directory](https://github.com/Xennis/react-notion-render/blob/main/examples/nextjs/src/app/page.tsx).\n\n## Supported blocks\n\nCreate a pull request or issue if something is missing.\n\n| Notion Block | Supported | Note |\n| -------------------- | --------- | --------------------------------------------------------------------------------------------------------- |\n| `audio` | ❌ | |\n| `breadcrumb` | ❌ | |\n| `bookmark` | ✅ | without preview image |\n| `bulleted_list_item` | ✅ | including nested lists |\n| `callout` | ✅ | |\n| `child_database` | ❌ | |\n| `child_page` | ✅ | |\n| `code` | ✅ | syntax highlighting possible: [Highlight.js example](https://xennis.github.io/react-notion-render/custom) |\n| `column` | ✅ | |\n| `column_list` | ✅ | |\n| `divider` | ✅ | |\n| `embed` | ❌ | |\n| `equation` | ❌ | |\n| `file` | ❌ | |\n| `heading_1` | ✅ | including toggled heading |\n| `heading_2` | ✅ | including toggled heading |\n| `heading_3` | ✅ | including toggled heading |\n| `image` | ✅ | |\n| `link_preview` | ❌ | |\n| `link_to_page` | ❌ | |\n| `numbered_list_item` | ✅ | including nested lists |\n| `paragraph` | ✅ | |\n| `pdf` | ❌ | |\n| `quote` | ✅ | |\n| `synced_block` | ✅ | |\n| `table_of_contents` | ❌ | |\n| `table` | ✅ | |\n| `table_row` | ✅ | |\n| `template` | ❌ | |\n| `to_do` | ✅ | |\n| `toggle` | ✅ | |\n| `video` | ➕ | embed possible: [YouTube example](https://xennis.github.io/react-notion-render/custom) |\n\n## Credits\n\nHow to render the Notion blocks is inspired by [react-notion-x](https://github.com/NotionX/react-notion-x) started by [Travis Fischer](https://github.com/transitive-bullshit).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxennis%2Freact-notion-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxennis%2Freact-notion-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxennis%2Freact-notion-render/lists"}