- A simple and easy to use package for rendering notion pages in your laravel application.
- This package also offers you a renderer out of the box. You can use it to render your notion pages on your own.
- You can add or remove the default renderers and use your own renderer too.
Since notion api doesn't support CORS and don't recommend making API calls from a webpage (see here), you may need to install laravel-notion-viewer composer package in order to get notion blocks from Notion Api.
But you can also use your own server to get the blocks from Notion Api and pass the blocks to the Renderer
class in
your client.
Install via npm
npm install notion-viewer-client
NotionViewer.render(id: string, element: HTMLElement, endPoint?: string)
Using axios
, XHR request will be sent to endPoint
to get the blocks from Notion Api and then render the blocks
in element
.
By default, the endPoint
is /laravel-notion-viewer/data/{id}
which is a route offered
by laravel-notion-viewer.
You can specify your own endpoint to get the blocks from your own server.
import NotionViewer from 'notion-viewer-client';
let notionPageId = 'this-is-a-notion-page-id'; // If you don't know how to get id, see https://github.com/w99910/laravel-notion-viewer/README.md#how-to-get-notion-page-id
document.addEventListener('DOMContentLoaded', async () => {
await NotionViewer.render(notionPageId, document.querySelector('#index'))
});
By specifying the endPoint
:
await NotionViewer.render(notionPageId, document.querySelector('#index'), 'your-end-point')
You can also parse blocks on your own using Renderer
class.
import Renderer from "notion-viewer-client/Renderer";
Renderer.renderPage(page, blocks, element)
import Renderer from "notion-viewer-client/Renderer";
let output = Renderer.parseBlocks(blocks)
console.log(output);
import Renderer from "notion-viewer-client/Renderer";
let output = Renderer.parseRichText(richText);
console.log(output);
import Renderer from "notion-viewer-client/Renderer";
let renderer = Renderer.getRenderer(block);
import Renderer from "notion-viewer-client/Renderer";
Renderer.onBeforeRender((renderer) => {
console.log('Called before render');
})
import Renderer from "notion-viewer-client/Renderer";
Renderer.onAfterRender((renderer) => {
console.log('Called after render');
})
The following are the block types supported by this package for now:
- paragraph
- heading_1
- heading_2
- heading_3
- to_do
- callout
- code
- image
- has_children
- children
- bulleted_list_item
- child_page
- numbered_list_item
- link_preview
- toggle
- quote
- divider
- table
- table_row
- Creating a compatible renderer
import Renderable from 'notion-viewer-client/interfaces/Renderable';
class YourCustomRenderer implements Renderable {
render(block: Block, level?: number, containerElement?: HTMLElement): string {
// Your code here
}
type() {
return 'your_block_type';
}
// optional event hooks
beforeRender(containerElement?: HTMLElement) {
};
afterRender(containerElement?: HTMLElement) {
};
}
- Adding a renderer:
import Renderer from "notion-viewer-client/Renderer";
Renderer.addRenderer(new YourCustomRenderer())
- Removing a default renderer:
import Renderer from "notion-viewer-client/Renderer";
Renderer.removeRenderer('block_type')
- Replacing\Removing all default renderers:
import Renderer from "notion-viewer-client/Renderer";
// Replacing renderers with your custom renders
Renderer.setRenderers([
new YourCustomRenderer(),
new YourAnotherCustomRenderer()
])
// Removing all renderers
Renderer.setRenderers([]);
If you want to support me, buy me a coffee via Binance.
- [ ] Add more renderers
- [ ] Add tests