https://github.com/deptno/react-script-fall

🍂 Declarative async script loader with order control
https://github.com/deptno/react-script-fall

dom hooks react react-hook script

Last synced: about 1 month ago
JSON representation

🍂 Declarative async script loader with order control

• Host: GitHub
• URL: https://github.com/deptno/react-script-fall
• Owner: deptno
• Created: 2019-06-25T05:17:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-26T08:51:18.000Z (almost 4 years ago)
• Last Synced: 2024-12-08T22:58:21.762Z (about 2 months ago)
• Topics: dom, hooks, react, react-hook, script
• Language: TypeScript
• Size: 17.6 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-script-fall

**react-script-fall** is a `` tag loader

- Declarative loading order control

- SSR safe

> react@^16.8 is required

```bash

npm install react-script-fall

```

## Why

As far as I known, `script` tag's `async` attribute can not be set '`false`,

so we need something to control this.

## Usage

#### simple

```typescript jsx

<Script src="https://cdn-dependency" onLoad={(loaded) => console.log({loaded})}>

  <Script src="https://cdn" async/>

```

#### real world

```typescript jsx

const InitSomething: FunctionComponent<{initializeSomething(): void}> = props => {

  const [loaded, setLoaded] = useState(0)

  const handleLoad = (loaded) => loaded && setLoaded(loaded + 1)

  useEffect(() => {

    if (loaded === 2) {

      // todo initialize something

      props.initializeSomething()

    }

  }, [loaded])

  return (

    

      <Script src="https://cdn" onLoad={handleLoad}/>

    

  )

}

```

## License

MIT