react-def
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    react-def

    NPM NPM license

    Use the component when DOM changes or component rendering take a lot of time.

    Installation

    npm i react-def
    # or 
    yarn add react-def

    Using

    The best way of using the component is to do it with elements that show self only on hover.
    The rendering of the components starts working only when the whole app will be rendered and displayed.
    Then Def components will render one by one as quickly as we can have 60fps.

    import Def from 'react-def'
    const TEN = [...new Array(10)]
     
     
    const Throttling = ({value = 10, children}) => {
      const end = Date.now() + value
      while (Date.now() < end) {
        continue
      }
      return children
    }
     
    const SimpleComponent = () => (
      <div>
        {TEN.map((v, i) => (
          <div key={i}>
            {TEN.map((v, j=> (
              <Throttling key={j}>
                ({i}.{j})
              </Throttling>
            ))}
          </div>
        ))}
      </div>
    )
     
    const DefComponent = () => (
      <div>
        {TEN.map((v, i) => (
          <div key={i}>
            <Def>
              {TEN.map((v, j=> (
                <Throttling key={j}>
                  ({i}.{j})
                </Throttling>
              ))}
            </Def>
          </div>
        ))}
      </div>
    )

    Try to use the SimpleComponent and the DefComponent and you see the difference.
    Also, you can provide property of the placeholder to show something wile it's rendering.

    const DefComponentPredefine = () => (
      <div>
        {TEN.map((v, i) => (
          <div key={i}>
            <Def placeholder='loading...'>
              {TEN.map((v, j=> (
                <Throttling key={j}>
                  ({i}.{j})
                </Throttling>
              ))}
            </Def>
          </div>
        ))}
      </div>
    )

    If you wanna defer the rendering only once use once property.

    const DefComponentPredefine = () => (
      <div>
        {TEN.map((v, i) => (
          <div key={i}>
            <Def once>
              {TEN.map((v, j=> (
                <Throttling key={j}>
                  ({i}.{j})
                </Throttling>
              ))}
            </Def>
          </div>
        ))}
      </div>
    )

    Issues

    If you find a bug, please file an issue on GitHub.

    Install

    npm i react-def

    DownloadsWeekly Downloads

    153

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    9.73 kB

    Total Files

    6

    Last publish

    Collaborators

    • deight