2.0.10 • Published 2 months ago

react-quill-ver2 v2.0.10

Weekly downloads
-
License
-
Repository
github
Last release
2 months ago

React Quill v2

A React component for Quill 2.0 rich text editor.

Installation

npm install react-quill-ver2
# or
yarn add react-quill-ver2
# or
pnpm add react-quill-ver2

Dependencies

This package requires the following peer dependencies:

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "quill": "^2.0.0"
  }
}

Usage

import ReactQuill from 'react-quill-ver2';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import 'highlight.js/styles/github.css';

function App() {
  const [value, setValue] = useState('');

  return (
    <ReactQuill
      value={value}
      onChange={setValue}
      theme="snow"
      modules={{
        toolbar: [
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['link', 'image', 'video'],
          ['clean']
        ]
      }}
    />
  );
}

Props

PropTypeDefaultDescription
valuestring-The value of the editor
defaultValuestring-The default value of the editor
onChange(content: string) => void-Callback when the editor content changes
optionsQuillOptions-Quill editor options
readOnlybooleanfalseWhether the editor is read-only
placeholderstring-Placeholder text
themestring'snow'Editor theme ('snow' or 'bubble')
modulesQuillOptions'modules'-Quill modules configuration
formatsstring[]-Allowed formats
styleReact.CSSProperties-Custom styles
classNamestring-Custom CSS class

Features

  • Full Quill 2.0 support
  • TypeScript support
  • Syntax highlighting with highlight.js
  • Emoji picker support
  • Customizable toolbar
  • Snow and Bubble themes
  • Read-only mode
  • Placeholder text
  • Custom styling

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Preview the build
npm run preview

License

MIT