Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
docs(next/script): Improve formatting of docs (vercel#26149)
Browse files Browse the repository at this point in the history
Noticed a few things off in the Script docs—for example, the "before" variant should show using a non-React Component `<script>` tag, & the capitalization was inconsistent in a few places.

## Documentation / Examples

- [x] Make sure the linting passes
  • Loading branch information
lachlanjc authored Jun 16, 2021
1 parent 875fefb commit d06a0ba
Showing 1 changed file with 7 additions and 8 deletions.
15 changes: 7 additions & 8 deletions docs/basic-features/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Example of usage
import Script from 'next/script'

// Before
<Script
<script
async
src="https://www.google-analytics.com/analytics.js"
/>
Expand All @@ -36,28 +36,27 @@ Three loading strategies will be initially supported for wrapping third-party sc

NOTE: above strategies work the same for inline scripts wrapped with ScriptLoader.

Example scenarios
## Example scenarios

```js
import Script from 'next/script'


// Loading polyfills before-interactive
<Script
src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
strategy="beforeInteractive"
></Script>
/>

// Lazy load FB scripts
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
></Script>
/>

// Use the onLoad callback to execute code on script load
<Script id="stripe-js" src="https://js.stripe.com/v3/" onLoad={() => {
this.setState({stripe: window.Stripe('pk_test_12345')});
}}></Script>
}} />

// Loading strategy works for inline scripts too
<Script strategy="lazyOnload">
Expand All @@ -78,7 +77,7 @@ import Script from 'next/script'
id="analytics"
nonce="XUENAJFW"
data-test="analytics"
></Script>
/>
```

## Which third-party scripts to wrap with Script Loader
Expand All @@ -89,4 +88,4 @@ We recommend the following Script Loader strategies for these categories of thir
| ----------------- | -------------------------------------------------------------------------------------------- |
| beforeInteractive | polyfill.io<br>Bot detection, security & authentication<br>User consent management (GDPR) |
| afterInteractive | Tag-managers<br>Analytics |
| lazyOnload | customer relationship management eg. Google feedback, chat support widget<br>social networks |
| lazyOnload | Customer relationship management eg. Google feedback, chat support widget<br>Social networks |

0 comments on commit d06a0ba

Please sign in to comment.