With React-Notion-Custom, you can combine Notion's powerful content management capabilities with React's flexible UI to create a fully customizable website or blog. Stop wasting time on complex CMS or database setups. Manage your content in Notion and create a stunning website with React-Notion-Custom!
https://www.notion.so/your-page-title-1234567890abcdef12345678
1234567890abcdef12345678
) is your page ID.npx notion-dump --page-id YOUR_PAGE_ID --token YOUR_INTEGRATION_TOKEN
npm create vite@latest my-notion-blog -- --template react-ts
cd my-notion-blog
npm install react-notion-custom
import { Notion } from "react-notion-custom";
import notionData from "./notion-data.json";
function HomePage() {
return (
<Notion>
<Notion.Cover src={notionData.cover} />
<Notion.Body>
<Notion.Title title={notionData.title} />
<Notion.Blocks blocks={notionData.blocks} />
</Notion.Body>
</Notion>
);
}
export default HomePage;
Deploy your Next.js app to Vercel or Netlify and share your Notion blog with the world!
For more detailed usage instructions and advanced customization options, please refer to [Incomplete].
npm install react-notion-custom notion-dump
For detailed development plans, please refer to CONTRIBUTING.md.
React-Notion-Custom welcomes your contributions! Whether it's bug reports, feature suggestions, or code contributions, please feel free to participate in any form. For more details, please check CONTRIBUTING.md.
This project is distributed under the MIT License. For more details, please refer to the LICENSE file.
If you have any questions or feedback, please create a GitHub issue or contact us via email.
Create a fantastic website with your Notion content using React-Notion-Custom! 🎉