search

NotionX / react-notion-x

Fast and accurate React renderer for Notion. TS batteries included. ⚡️
https://react-notion-x-demo.transitivebullsh.it
MIT License
4.76k stars 553 forks source link

feat: support for `Created by` type & `Last edited by` type property in database #271

Open seonglae opened 2 years ago

seonglae commented 2 years ago

Description

This is my page property

image

And this is my rendered page property by react-notion-x v4

image

Created by type & Last edited by type property removed

I noticed react-notion-x v6 NotionRenderer now have components property which has type like below

export interface NotionComponents {
    Image: any;
    Link: any;
    PageLink: any;
    Checkbox: React.FC<{
        isChecked: boolean;
        blockId: string;
    }>;
    Code: any;
    Equation: any;
    Callout?: any;
    Collection: any;
    Property?: any;
    propertyTextValue: ComponentOverrideFn;
    propertySelectValue: ComponentOverrideFn;
    propertyRelationValue: ComponentOverrideFn;
    propertyFormulaValue: ComponentOverrideFn;
    propertyTitleValue: ComponentOverrideFn;
    propertyPersonValue: ComponentOverrideFn;
    propertyFileValue: ComponentOverrideFn;
    propertyCheckboxValue: ComponentOverrideFn;
    propertyUrlValue: ComponentOverrideFn;
    propertyEmailValue: ComponentOverrideFn;
    propertyPhoneNumberValue: ComponentOverrideFn;
    propertyNumberValue: ComponentOverrideFn;
    propertyLastEditedTimeValue: ComponentOverrideFn;
    propertyCreatedTimeValue: ComponentOverrideFn;
    propertyDateValue: ComponentOverrideFn;
    Pdf: any;
    Tweet: any;
    Modal: any;
    Embed: any;
    Header: any;
    nextImage?: any;
    nextLink?: any;
}

I implemented propertyPersonValue but didn't worked for creator, editor type How about to add support for Created by type & Last edited by type with propertyPersonValue or propertyCreatedByValue, propertyLastEdiotedByValue?

Notion Test Page ID

6d649d5e3a1b45ecbfba6ad536e6c987 my deployment

transitive-bullshit commented 2 years ago

Some of these properties have better support than others at the moment.

Here's an example of how you can you them in practice: https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/transitive-bullshit/components/NotionPage.tsx#L113-L169

Honestly, I'm not sure if the person-related ones work.