React Setup

Introduction

Learn how to use Tetrons and integrate it into your project. This guide walks you through everything you need.

React Integration with Tetrons

The official Tetrons React component enables seamless integration of the rich-text editor into React applications. This guide walks through setting up a modern React app with Vite and embedding the Tetrons editor.

Prerequisites

Node.js ≥ 18, npm or yarn

1. Create React App with Vite

npm create vite@latest tetrons-react-demo -- --template react

2. Navigate to Project Directory

cd tetrons-react-demo

3. Install Editor Package

Install Tetrons React wrapper as a placeholder. Tetrons has released its official package 2.4.4

npm install tetrons

4. Edit src/Editor.jsx

import React, { useState } from "react";
import TetronsEditor from "tetrons";
import "tetrons/style.css";
import "./App.css";

export default function App() {
  const [saving, setSaving] = useState(false);

  const [savedDocumentJson] = useState({
    type: "doc",
    content: [
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "Hello 👋 This document was loaded when the editor started.",
          },
        ],
      },
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "You can now edit, autosave, and track versions.",
          },
        ],
      },
    ],
  });

  return (
    <div className="app-root">
      <div className="editor-panel full-width">
        <div className="editor-status">
          {saving ? "Saving…" : "All changes saved"}
        </div>

        <div className="editor-container">
          <TetronsEditor
            apiKey="Your API key"
            initialContent={{ json: savedDocumentJson }}
            onLoad={() => setSaving(false)}
            onChange={() => setSaving(false)}
            config={{
              features: {
                separator: true,
                newFile: true,
                openFile: true,
                saveFile: true,
                cut: true,
                copy: true,
                paste: true,
                undo: true,
                redo: true,
                bold: true,
                italic: true,
                underline: true,
                strikeout: true,
                subscript: true,
                superscript: true,
                fontColor: true,
                highlightColor: true,
                clearFormatting: true,
                bulletedList: true,
                numberedList: true,
                lineHeight: true,
                letterSpacing: true,
                indentIncrease: true,
                indentDecrease: true,
                alignLeft: true,
                alignCenter: true,
                alignRight: true,
                alignJustify: true,
              },
              addOns: {
                insertTable: true,
                insertImage: true,
                insertVideo: true,
                insertAudio: true,
                insertCheckboxList: true,
                insertLink: true,
                insertComments: true,
                insertEmoji: true,
                insertHorizontalRule: true,
                insertEmbedVideo: true,
                zoomIn: true,
                zoomOut: true,
                print: true,
                exportFile: true,
                resetFormatting: true,
                preview: true,
                spellCheck: true,
                voice: true,
                ai: true,
                languageConverter: true,
                codeEditor: true,
                mathEquation: true,
                virtualKeyboard: true,
                getContentFromImage: true,
              },
              autoSave: true,
              showVersions: true,
              ui: {
                topMenu: true,
                paragraphDropdown: true,
                fontDropdown: true,
                fontSizeDropdown: true,
              },
            }}
          />
        </div>
      </div>
    </div>
  );
}

5. Add API Key (Optional)

If required for cloud usage or premium features, replace "YOUR_API_KEY" with your actual Tetrons API key.

Running the React App

npm run dev
Press Ctrl + C to stop the server.

Build & Deploy

Build the app: npm run build Preview the build: npm run preview Copy the contents of the dist/ folder to your preferred web server: Apache: /var/www/html Nginx: /usr/share/nginx/html

Chatbot