https://github.com/llgaetanll/notion-core
The core functionality of notion's dynamic components with drag & drop
https://github.com/llgaetanll/notion-core
dynamic-components notion react react-beautiful-dnd
Last synced: 4 months ago
JSON representation
The core functionality of notion's dynamic components with drag & drop
- Host: GitHub
- URL: https://github.com/llgaetanll/notion-core
- Owner: llGaetanll
- Created: 2020-10-07T20:47:39.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-04T10:57:54.000Z (over 3 years ago)
- Last Synced: 2025-04-03T03:11:15.078Z (9 months ago)
- Topics: dynamic-components, notion, react, react-beautiful-dnd
- Language: JavaScript
- Homepage:
- Size: 787 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# notion-core
This project aims to re-create the concept of dynamically editable components seen on
[notion.so](https://notion.so).
## Motivation
The idea of the end user being able to freely manipulate website elements is really powerful. Having an
opensource project like this means that developers can create their own custom components, or incorporate this
functionality in part of their react websites.
## How does it work?
It's actually really easy!
Each dynamic component has 2 modes: `display`, and `edit`. To create a new dynamic component, simply create a
component for each these modes and pass it in to the `DynamicComponent` component. You can also chose to pass
in props to each mode component.
Below is the actual code for the `TextField` component.
```JSX
// This component is displayed when the component is in `display` mode
const TextDisplayComponent = ({ text, setComponentMode, ...props }) => {
const classes = useStyles();
// when the user hovers over the element
// switch to edit mode
const handleEdit = () =>
setComponentMode("edit");
return (
{text}
);
}
// This component is displayed when the component is in `edit` mode
const TextEditComponent = ({ text = '', setText, setComponentMode, ...props }) => {
const ref = useRef();
const classes = useStyles();
// focus the input ref
useEffect(() => {
ref.current.focus();
})
const handleEdit = event => setText(event.target.value);
return (
);
}
// This is the final exported component
const TextField = ({ text, setText, displayProps, editProps }) =>
}
editComponent={}
displayProps={{
text,
...displayProps
}}
editProps={{
text,
setText,
...editProps
}}
// default mode of the component
mode="display"
/>
export default TextField;
```
Now using this code in your app is easy as pie
```JSX
const App = () => {
// keep track of state for the text component
// as your app grows you might think of using redux or apollo...
const [text, setText] = useState('hello world');
return (
);
}
```
With the functionality implemented in the `TextField` component defined above, the component should become
editable when hovered.
## PRs are welcome!
If you want to help me out on this project, feel free! Any help or suggestion is greatly appreciated.
### Contributing
If 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!
Alternatively you could contribute an idea for one.