bionify
v2.0.0
Published
Bionify is a library for bionic reading. It changes html blocs into a bionic reading experience.
Downloads
10
Maintainers
Readme
bionify
Install
npm install bionify
Usage
function ModalDemo() {
const [bionified, setBionified] = React.useState(true)
const text = '<p>Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.</p><h2>title in the meantime</h2><p>Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.</p>';
const html = bionified ? bionify(text) : text;
return (
<div className="p-8 space-y-8">
<div className="flex items-center space-x-4">
<span>Bionified</span>
<Toggle onChange={(checked) => setBionified(checked)} value={bionified} />
</div>
<div className="prose" dangerouslySetInnerHTML={{__html: html }} />
</div>
)
}