{"id":15065292,"url":"https://github.com/jaysongiroux/notion-blocks","last_synced_at":"2026-01-03T03:40:34.414Z","repository":{"id":157678007,"uuid":"632298132","full_name":"jaysongiroux/notion-blocks","owner":"jaysongiroux","description":"Customizable notion blocks npmjs package","archived":false,"fork":false,"pushed_at":"2023-06-01T22:49:15.000Z","size":4082,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T10:22:25.533Z","etag":null,"topics":["notion","notion-api","npmjs","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"http://notion-blocks.jasongiroux.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaysongiroux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-04-25T06:00:14.000Z","updated_at":"2024-07-30T17:09:29.000Z","dependencies_parsed_at":"2024-11-21T22:16:20.646Z","dependency_job_id":null,"html_url":"https://github.com/jaysongiroux/notion-blocks","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysongiroux%2Fnotion-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysongiroux%2Fnotion-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysongiroux%2Fnotion-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysongiroux%2Fnotion-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaysongiroux","download_url":"https://codeload.github.com/jaysongiroux/notion-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243806114,"owners_count":20350783,"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":["notion","notion-api","npmjs","react","storybook","typescript"],"created_at":"2024-09-25T00:36:23.170Z","updated_at":"2026-01-03T03:40:34.390Z","avatar_url":"https://github.com/jaysongiroux.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Notion-Blocks\n\n\u003cdiv align=\"center\"\u003e\n\n![alt text](https://github.com/jaysongiroux/notion-blocks/blob/master/assets/notionBlocks-white-bg.png?raw=true)\n\n[![semantic-release: React](https://img.shields.io/badge/semantic--release-react-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)\n![Main Workflow](https://github.com/jaysongiroux/notion-blocks/actions/workflows/main.yml/badge.svg)\n[![npm version](https://badge.fury.io/js/notion-blocks.svg)](https://badge.fury.io/js/notion-blocks)\n[![Badge](https://202o2716cl9w.runkit.sh)](http://notion-blocks.jasongiroux.com)\n\n\u003c/div\u003e\nA React component package to be given the `blocks` from the notion API to render in browser\n\n[NPM PACKAGE](https://www.npmjs.com/package/notion-blocks)\n\n[LIVE DEMO](http://notion-blocks.jasongiroux.com)\n\n## Use\n\n### NotionBlocks\n\n```js\nimport {NotionBlocks} from 'notion-blocks'\nimport 'notion-blocks/dist/styles/katex.css'\n\n\nexport const example = () =\u003e {\n  const blocks = BLOCKS_FROM_NOTION_API;\n\n  return (\n    \u003cNotionBlocks blocks={blocks}\u003e\n  )\n}\n```\n\n### FetchNotionBlocks\n\n```js\nimport { FetchNotionBlocks } from 'notion-blocks';\n\nconst { cover, response, blocks } = await FetchNotionBlocks({\n  notionkey: process.env.NOTION_KEY,\n  notionPageId: PAGE_ID,\n});\n```\n\n## API\n\n### NotionBlocks\n\n| Prop               | type     | Description                                                                                              |\n| ------------------ | -------- | -------------------------------------------------------------------------------------------------------- |\n| blocks             | object   | list of blocks that can be acquired from Notion's API                                                    |\n| codeTheme          | string   | `light` or `dark`                                                                                        |\n| containerStyle     | object   | Object to style container where blocks are rendered                                                      |\n| codeOverlay        | boolean  | To Show overlay in code block that allows users to copy code, and see the language within the code block |\n| headerStyles       | object   | Style overrides for headers, These overrides do not include toggle headers                               |\n| toggleHeaderStyles | object   | Style overrides for toggle headers. These styles do not include the content within the headers           |\n| toggleStyles       | object   | Style overrides for toggle lists. These styles do not include the content within the headers             |\n| codeStyles         | object   | styles placed onto the code block container.                                                             |\n| pictureStyles      | object   | styles for pictures                                                                                      |\n| calloutStyles      | object   | styles for callout container                                                                             |\n| quoteStyles        | object   | styles for quote container                                                                               |\n| listStyles         | object   | styles for individual block container                                                                    |\n| columnStyles       | object   | styles for column container                                                                              |\n| bookmarkStyles     | object   | styles for bookmark container                                                                            |\n| equationStyles     | object   | styles for Equation container                                                                            |\n| childPageStyles    | object   | styles for child page container                                                                          |\n| tableStyle         | object   | styles for table container                                                                               |\n| tableRowStyle      | object   | styles for all table rows except headers                                                                 |\n| tableHeaderStyle   | object   | styles for table headers row and columns                                                                  |\n| onChildPageClick   | function | function to be called if user clicks on child page block. `(id, title) =\u003e console.log(id, title)`        |\n\n### FetchNotionBlocks\n\nFunction to only be used on the backend where secrets are not exposed to the client\n\n| prop         | type   | description                    |\n| ------------ | ------ | ------------------------------ |\n| notionKey    | string | notion secret key              |\n| notionPageId | string | ID of page you'd like to fetch |\n\n## Not Supported\n\n- link to page (not to be confused with child page or embedded pages which are supported)\n\n# Development\n\n## Local Setup\n\n### Setup\n\nInstall dependencies\n\n```bash\nyarn\n```\n\n### local StoryBook\n\n```bash\nyarn storybook\n```\n\n### Building\n\n```bash\nyarn rollup\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaysongiroux%2Fnotion-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaysongiroux%2Fnotion-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaysongiroux%2Fnotion-blocks/lists"}