https://github.com/vanssign/react-davinci-editor
Easy to integrate WYSIWYG editor package for your react firebase app
https://github.com/vanssign/react-davinci-editor
editor firebase react
Last synced: 3 months ago
JSON representation
Easy to integrate WYSIWYG editor package for your react firebase app
- Host: GitHub
- URL: https://github.com/vanssign/react-davinci-editor
- Owner: vanssign
- License: mit
- Created: 2021-08-17T16:21:51.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-29T14:13:51.000Z (almost 5 years ago)
- Last Synced: 2025-10-29T13:51:59.776Z (8 months ago)
- Topics: editor, firebase, react
- Language: JavaScript
- Homepage: https://davincipaints.vercel.app/
- Size: 358 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Davinci Editor
An easy to integrate WYSIWYG Editor for your firebase react app
[](https://opensource.org/licenses/MIT) [](https://www.npmjs.com/package/react-davinci-editor)
**Disclaimer**: React Davinci Editor is a work in progress, there are still many components and features to add before is considered stable so it is subject to change during its development.
## Installation
`npm install react-davinici-editor`
## Prequisites
Setup a firebase project, refer [Firebase docs](https://firebase.google.com/docs/web/setup) and setup authentication via email address, Firestore Database with a collection named **blog** and firebase storage.
## Components
Note: Head down to Project Settings of your firebase app and find the firebaseConfig
### Firebase Editor
Editor interface for building your blog posts
`import {FirebaseEditor} from 'react-davinci-editor'`
``
| Property | Type | Description |
| -------------------- | ------- | -------------------------------------- |
| FirebaseConfig | Object | firebaseConfig values of your project |
| RegisterationAllowed | Boolean | Firebase registeration page visibility |
### Blog Post Builder
Component to layout your blog post by fetching data from firestore
`import {BlogPostBuilder} from 'react-davinci-editor'`
``
| Property | Type | Description |
| -------------- | ------ | ------------------------------------- |
| FirebaseConfig | Object | firebaseConfig values of your project |
| BlogId | String | Document Id of the post in firestore |
Notes:
- Use react-router or similar packages to generate blog posts based on params.
- Use **withBlogPosts** HOC as shown below or refer [firebase docs](https://firebase.google.com/docs/firestore/query-data/get-data#get_all_documents_in_a_collection) and fetch doc ids for the collection 'blog;
### withBlogPosts
withBlogPosts is a Higher Order Component that provides all the blog posts as props.
Example:
```
import React from 'react'
import withBlogPosts from 'react-davinci-editor';
function IndexPageExample(props) {
return (
{props.blogPosts.map((post, index) => {
return (
BlogId: {post.id}
Title: {post.pageInfo.title}
Excerpt: {post.pageInfo.excerpt}
Tags: {post.pageInfo.tags}
)
})}
)
}
export default withBlogPosts(BuildIt);
```
Note: Must pass FirebaseConfig as props to your component
i.e ``