React Blog Writer

Description:

react-blog-writer is a very useful and easy to use for text editing for any kind of blog or post.

How to install?

npm i react-blog-writer

Link with material icons

Copy and paset this material icons cdn link on head tag.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Implementation

import React, {useState} from 'react';
import BlogWriter from 'react-blog-writer';


const App = () => {
    let [nodes, setNodes] = useState(null);

    return (
        ....
        <BlogWriter finalNodes={setNodes} placeHolder={"Type here..."}/>
    )
}
export default App;

The property finalNodes is used to get html string from the library and store it to your current variable. In this example it will get stored in nodes variable.

The placeHolder property is to set default value on your write pad.

After getting your html string, you can store it to your database.

For using html string in your react JSX you can use dangerouslySetInnerHTML Here is the documentation for this: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Theming:

There is a little on this section. Mainly on primary colors and width and height.

:root {
   --writer-primary:#5644c1;
  --writer-width:600px;
  --writer-height:400px;
}

A sample image has been provided here for a look.

Please check common css conflicts, as this library contains many form fields

This library is using a react-color-selector. If you want to use this library seperately here in your application here what you can do.

   npm install react-color-selector

Here is the link of this library: https://www.npmjs.com/package/react-color-selector

Raise an Issue

If you are facing any issue regarding installation and usage, raise your issue in Git repo.

https://github.com/devsubhajit/react-blog-writer/issues