React-TypeIt

A simple lightweight WYSIWYG editor

DEMO: https://rajohan.no/typeit

Installation

$ npm i react-typeit

Getting Started

import TypeIt from "react-typeit";
import "react-typeit/build/styles.min.css"

Note: For the editor icons to work copy the "images" folder from /node_modules/react-typeit/build/ to your project's public path. The images needs to resolve on YOUR_SERVER/images/react-typeit

Use the component

To use the component simply render it

<TypeIt />

Props

onChange(content) : Returns the new content of the editor after change. config(yourConfig) : Pass your own config to the editor (optional)

Example

import TypeItConfig from "./myConfig";

<TypeIt 
    onChange={content => console.log(content)}
    config={TypeItConfig} 
/>

Config

If you want to change some of the appearance or functionality of the editor you can pass it your own config. For now you will have to redefine the whole config object, this will be made easier on a later point.

toolbar.imgRoot : root directory for the toolbar icons toolbar.tools : Array of toolbar tools. Each array inside the root array will create a new "group" of tools that gets separated with a border right from the next toolbar group. emoticons.imgRoot : root directory for the emoticon icons emoticons.icons : available emoticon icons

Note

1. toolbar.tools and toolbar.icons names need to be equal to the image name in your imgRoot (without the file extension)
2. Only SVG icons are supported as they are injected to the html with react-svg

Default config

const config = {
    toolbar: {
        imgRoot: "images/react-typeit/",
        tools: [
            ["bold", "italic", "underline", "strikethrough"],
            ["header1", "header2"],
            ["quote", "code", "horizontalRule"],
            ["listUnordered", "listOrdered"],
            ["alignLeft", "alignCenter", "alignRight", "alignJustify"],
            ["indent", "outdent"],
            ["link", "image"],
            ["emoticon", "formatClear"],
            ["source"]
        ]
    },
    emoticons: {
        imgRoot: "images/react-typeit/emoticons/",
        icons: [
            "smile", "wink", "tongue", "grin", "laugh", "frowny", "unsure", "cry", 
            "grumpy", "angry", "astonished", "afraid", "nerd", "dejected", "bigEyes", 
            "sunglasses", "confused", "silent", "love", "kiss"
        ]
    }

};

export default config;

Support

Bugs and requests: submit them through the project's issues tracker.

License and author info

Released under the MIT License. Authored and maintained by Raymond Johannessen.

rajohan.no  ·  GitHub @rajohan  ·  Twitter @rajohan