README-en.md

中文文档

What is FocusingJs ?

FocusingJs is an implantable, immersive reading plugin, easy to use, and open source

compatible PC browser：Chrome，Firefox，Safar，Edge，IE11

Two lines of simple code for implement minimalist reader functionality

Support CodePen Trying

Install & Using

npm

install

npm i focusingjs --save

use

<div id="#article"> content ...... </div>

// enter file import css
import 'focusingjs/dist/focusingjs.min.css'

import FocusingJs from 'focusingjs'

const fs = new FocusingJs('#article')

fs.open()

cdn

<div id="#article"> content ...... </div>

<link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/gh/HuziG/focusingjs/cdn/dist/focusingjs.min.css"
/>

<script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/gh/HuziG/focusingjs/cdn/dist/focusingjs.min.js"
></script>

<script type="text/javascript">
  const fs = new FocusingJs('#article')

  fs.open()
</script>  

⚠️ under ssr render mode

the plugin involve window attribue ， in react life, the render() need to create som dom， before the render ，it has no put the component render to actual dom，so the plugin cant get the browser window object，then we neet to change our methods，look these

// react class
componentDidMount()
{
  const fs = new FocusingJs('#id')
  fs.open()
}

// react hook
useEffect(() => {
  const fs = new FocusingJs('#id')
  fs.open()
}, [])