File tree Expand file tree Collapse file tree 1 file changed +40
-0
lines changed
Expand file tree Collapse file tree 1 file changed +40
-0
lines changed Original file line number Diff line number Diff line change @@ -23,3 +23,43 @@ pnpm i react-headless-markdown-editor
2323```
2424
2525### Usage
26+
27+ With no styling options
28+
29+ ``` js
30+ import { Editor } from " react-headless-markdown-editor" ;
31+
32+ < Editor id= " body" name= " body" rows= {25 }>
33+ < Editor .H1Control / >
34+ < Editor .H2Control / >
35+ < Editor .H3Control / >
36+ < / Editor> ;
37+ ```
38+
39+ But it's easy enough to add something.
40+
41+ I've made it work beautifully with normal css classes or tailwind.
42+
43+ ``` js
44+ import { Editor } from " react-headless-markdown-editor" ;
45+
46+ < Editor
47+ id= " body"
48+ name= " body"
49+ rows= {25 }
50+ // css class for the textarea
51+ className= " textarea-class"
52+ // css class for the container
53+ containerClassName= " container-class"
54+ // css class for the controls container
55+ controlsClassName= " controls-class"
56+ >
57+ < Editor .H1Control className= " control-class" / >
58+ < Editor .H2Control className= " control-class" / >
59+ < Editor .H3Control className= " control-class" / >
60+ < / Editor> ;
61+ ```
62+
63+ Check out the [ Demo] ( https://joaocnh.github.io/react-headless-markdown-editor/ ) for an example of styling
64+
65+ [ Source Code] ( https://github.com/JoaoCnh/react-headless-markdown-editor/blob/main/src/App.tsx )
You can’t perform that action at this time.
0 commit comments