{"id":23044995,"url":"https://github.com/llgaetanll/notion-core","last_synced_at":"2025-08-14T23:31:34.119Z","repository":{"id":113533817,"uuid":"302156614","full_name":"llGaetanll/notion-core","owner":"llGaetanll","description":"The core functionality of notion's dynamic components with drag \u0026 drop","archived":false,"fork":false,"pushed_at":"2022-07-04T10:57:54.000Z","size":806,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T03:11:15.078Z","etag":null,"topics":["dynamic-components","notion","react","react-beautiful-dnd"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/llGaetanll.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":"2020-10-07T20:47:39.000Z","updated_at":"2024-07-23T18:40:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"8287a076-e3ba-4f06-a03a-11c94cb4a7d8","html_url":"https://github.com/llGaetanll/notion-core","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/llGaetanll/notion-core","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/llGaetanll%2Fnotion-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/llGaetanll%2Fnotion-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/llGaetanll%2Fnotion-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/llGaetanll%2Fnotion-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/llGaetanll","download_url":"https://codeload.github.com/llGaetanll/notion-core/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/llGaetanll%2Fnotion-core/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270499976,"owners_count":24595149,"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","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dynamic-components","notion","react","react-beautiful-dnd"],"created_at":"2024-12-15T21:17:43.113Z","updated_at":"2025-08-14T23:31:34.092Z","avatar_url":"https://github.com/llGaetanll.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# notion-core\nThis project aims to re-create the concept of dynamically editable components seen on\n[notion.so](https://notion.so).\n\n## Motivation\nThe idea of the end user being able to freely manipulate website elements is really powerful. Having an\nopensource project like this means that developers can create their own custom components, or incorporate this\nfunctionality in part of their react websites.\n\n## How does it work?\nIt's actually really easy!\n\nEach dynamic component has 2 modes: `display`, and `edit`. To create a new dynamic component, simply create a\ncomponent for each these modes and pass it in to the `DynamicComponent` component. You can also chose to pass\nin props to each mode component.\n\nBelow is the actual code for the `TextField` component.\n```JSX\n// This component is displayed when the component is in `display` mode\nconst TextDisplayComponent = ({ text, setComponentMode, ...props }) =\u003e {\n  const classes = useStyles();\n\n  // when the user hovers over the element\n  // switch to edit mode\n  const handleEdit = () =\u003e\n    setComponentMode(\"edit\");\n\n  return (\n    \u003cTypography \n      onMouseEnter={handleEdit} \n      className={classes.display} \n      {...props}\n    \u003e\n      {text}\n    \u003c/Typography\u003e\n  );\n}\n\n// This component is displayed when the component is in `edit` mode\nconst TextEditComponent = ({ text = '', setText, setComponentMode, ...props }) =\u003e {\n  const ref = useRef();\n  const classes = useStyles();\n  \n  // focus the input ref\n  useEffect(() =\u003e {\n    ref.current.focus();\n  })\n\n  const handleEdit = event =\u003e setText(event.target.value);\n\n  return (\n    \u003cMuiInputBase\n      className={classes.edit}\n      onChange={handleEdit}\n      value={text}\n      inputRef={ref}\n      {...props}\n    /\u003e\n  );\n}\n\n// This is the final exported component\nconst TextField = ({ text, setText, displayProps, editProps }) =\u003e\n  \u003cDynamicComponent \n\n    displayComponent={\u003cTextDisplayComponent /\u003e}\n    editComponent={\u003cTextEditComponent /\u003e}\n\n    displayProps={{\n      text,\n      ...displayProps\n    }}\n    editProps={{\n      text,\n      setText,\n      ...editProps\n    }}\n\n    // default mode of the component\n    mode=\"display\" \n  /\u003e\n\nexport default TextField;\n```\n\nNow using this code in your app is easy as pie\n```JSX\nconst App = () =\u003e {\n  // keep track of state for the text component\n  // as your app grows you might think of using redux or apollo...\n  const [text, setText] = useState('hello world');\n\n  return (\n    \u003cdiv style={{height: '100%', width: 400, margin: '0 auto'}}\u003e\n        \u003cTextField text={text} setText={setText} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\nWith the functionality implemented in the `TextField` component defined above, the component should become\neditable when hovered.\n\n## PRs are welcome!\nIf you want to help me out on this project, feel free! Any help or suggestion is greatly appreciated.\n### Contributing\nIf you would like to help contribute to the project, see the [Dynamic Components Project](https://github.com/llGaetanll/notion-core/projects/2) and contribute a component!\nAlternatively you could contribute an idea for one.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fllgaetanll%2Fnotion-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fllgaetanll%2Fnotion-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fllgaetanll%2Fnotion-core/lists"}