2

I am building an editor with React Quill. Could you give some advice on how I can change the border style of the editor dynamically? The border color should be changed to red if there is an error in ReactQuill.

The following code is what I tried, but it changes the outline of the whole Quill component.

   <div className={{error ? classNameOnError : ""}>
        <ReactQuill
          theme="snow"
          placeholder="Explain about the project in detail."
          onChange={(contentHtml) =>
            setValues({ ...values, content: contentHtml })
          }
          onBlur={(e) => validate({ content: e.index })}
        />
      </div>
Che.P
  • 59
  • 1
  • 9
  • Hi @Che.P. Did you solve this? I have the same challenge and am stuck. – Jay J Jul 30 '22 at 20:38
  • 1
    Hello @JayJ ! Unfortunately, I haven't solved it yet. I will leave a comment when if I find a solution. – Che.P Aug 01 '22 at 11:58
  • this worked for me. It tracks whether submitted or not and if content of React-Quill is empty. style={(submitted && description === "") ? { border: "2px solid red" } : {}} – Jay J Aug 01 '22 at 15:00
  • 1
    Thank you! It is working. Have you found a way to remove the grey border as well? The red border is displayed on top of the grey border. I see the existing grey border under the red line. – Che.P Aug 02 '22 at 10:39
  • I have not but didn't try. Will share if I figure it out - could you do the same please? Also do you mind if I post the above as an official answer? @Che.P – Jay J Aug 02 '22 at 14:02

1 Answers1

3

This is the way that I approached solving the issue.

TextEditor.js

import {useState} from 'react'; 
import './_textEditor.scss'

const TextEditor = () => {
// 
const [error, setError] = useState()

return 
<div>
 <ReactQuill
   theme="snow"
   className={error ? "ql-error" : null} // Add a dynamic class 
   onChange={(contentHtml) =>
    setValues({ ...values, content: contentHtml })
   }
 />
</div>
}

_textEditor.scss

.quill.ql-error {
  .ql-toolbar {
    border-bottom: 1px solid red;
  }
  .ql-container {
    border-left: 1px solid red;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
  }
}

enter image description here

Che.P
  • 59
  • 1
  • 9