unified-doc-react
react
wrapper for unified-doc.
Install
npm install unified-doc-react
Use
DocComponent
For quick and simple rendering of a document, use the React component:
;; const options = content: '> some **strong** content' filename: 'doc.md' marks: id: 'a' start: 0 end: 5 id: 'a' start: 10 end: 12 ; { return <DocComponent className="my-doc" options=options /> ;}
DocProvider
and useDoc
For building advanced and interactive document applications, wrap your component with a DocProvider
. Components under the DocProvider
have access to the doc
instance via the useDoc
hook.
// App.js;; ; const options = content: '> some **strong** content' filename: 'doc.md'; { return <DocProvider options=options> <MyDoc /> </DocProvider> ;} // MyDoc.js;;; { const doc = ; const query setQuery = ; const results setResults = ; { ; ; } { const query = etargetvalue; const results = doc; ; ; } return <div> <h1>docname</h1> <h2>Search</h2> <input value=query onChange=handleSearch /> results <button onClick=clearSearch> Clear search </button> <h2>Contents</h2> <div>docresult</div> <button onClick= > Download original </button> <button onClick= > Download HTML </button> <button onClick= > Download text </button> <h2>Text Contents</h2> <pre>doc</pre> </div> ;}
unified-doc-dom
Use with unified-doc-react
can be used seamlessly with methods in unified-doc-dom
to build interactive document applications.
;;;; // import optional highlight styles; { const docRef = ; const fileData setFileData = ; const marks setMarks = ; { ; } // enable and capture selected text as marks ; // register marks with callbacks ; // highlight applied marks given its ID { ; } // read file data from a JS file { const fileData = await ; ; } let docContent; if !fileData docContent = <input type="file" onChange=uploadFile></input>; else const options = content: fileDatacontent filename: fileDataname marks ; docContent = <DocComponent options=options />; return <div> <button onClick=highlightLastMark> Highlight last mark </button> <div ref=docRef> docContent </div> </div> ;}
API
The term doc
used below refers to a unified-doc
instance. Please refer to unified-doc for detailed documentation of doc
API methods.
DocComponent(props)
Interface
;
A simple React component that wraps around a doc
instance.
Related interfaces
DocProvider(props)
Interface
;
Use the DocProvider
to expose the doc
instance in a React context. Components under DocProvider
can access the doc
instance via the useDoc
hook.
Related interfaces
useDoc()
Interface
;
Access the doc
instance in any components under the DocProvider
.
options
Provide options
to configure unified-doc
.
Please refer to unified-doc for detailed documentation of options
.
Development
This project is:
- implemented with the
unified-doc
interface. - linted with
xo
+prettier
+tsc
. - developed and built with
microbundle
. - tested with
jest
. - softly-typed with
typescript
withcheckJs
(only public APIs are typed).
# install dependencies npm run bootstrap # build package with microbundle npm run build # clean package (rm dist + node_modules) npm run clean # watch/rebuild package with microbundle npm run dev # lint package with xo + prettier + tsc npm run lint # update semantic version with changelog npm run release # test package with jest in --watch mode (make sure to run the 'dev' script) npm run test # test package in a single run npm run test:run