https://github.com/the-bugging/react-use-scripts

Appends script tags to the document as functions or components with ease
https://github.com/the-bugging/react-use-scripts

helmet hooks react script typescript

Last synced: 1 day ago
JSON representation

Appends script tags to the document as functions or components with ease

• Host: GitHub
• URL: https://github.com/the-bugging/react-use-scripts
• Owner: the-bugging
• License: mit
• Created: 2020-08-12T23:18:47.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2023-03-09T02:27:40.000Z (almost 2 years ago)
• Last Synced: 2025-01-11T09:47:13.349Z (4 days ago)
• Topics: helmet, hooks, react, script, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-use-scripts
• Size: 2.23 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# react-use-scripts

> Appends script tags to the document as functions or components with ease

[![NPM](https://img.shields.io/npm/v/react-use-scripts.svg)](https://www.npmjs.com/package/react-use-scripts)

---

## Table of Contents

- [Install](#install)

- [Usage](#usage)

- [Documentation](#documentation)

- [License](#license)

---

## Install

```bash

npm install --save react-use-scripts

```

---

## Usage

- react-use-scripts will return a default export _useScript_ and a named export _{ ScriptLoader }_

- Use ScriptLoader as an element in your **JSX** and add optional children and/or fallback rendering

```tsx

import * as React from 'react';

import { ScriptLoader } from 'react-use-scripts';

const App = () => {

  return (

     console.log('ready!')}

      onError={(error) => console.log('an error has happened!', error)}

      fallback={(error) => (

        This has errored! {JSON.stringify(error)}

      )}

    >

      Script has loaded succesfully!

    

  );

};

```

- Append scripts to the document programmatically

```tsx

import * as React from 'react';

import useScript from 'react-use-scripts';

const App = () => {

  const [startTrigger, setStartTrigger] = React.useState(false);

  const { ready, error } = useScript({

    src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',

    onReady: () => console.log('ready!'),

    onError: (error) => console.log('an error has happened!', error),

    startTrigger,

  });

  const handleAppendScriptClick = () => {

    setStartTrigger(true);

  };

  return (

    


      

        Click to start appending

      

      {ready && 
Script appended to the head programmatically!
}

      {error && 
Script has errored! {JSON.stringify(error)}
}

    

  );

};

```


---

## Documentation

1. `ScriptLoader`: **all props** are optional but without either _src_ or _innerText_ this will return `null`;

```tsx

interface IScriptLoaderProps {

  src?: string;

  innerText?: string;

  onReady?: () => void;

  onError?: (error: string | Event) => void;

  otherProps?: THTMLScriptElementProps;

  startTrigger?: boolean;

  id?: string;

  appendTo?: string;

  delay?: number;

  children?:

    | JSX.Element

    | JSX.Element[]

    | string

    | string[]

    | number

    | number[];

  fallback?: (error: string | Event) => JSX.Element;

}

```

2. useScript

```tsx

interface IScriptProps {

  src?: string;

  innerText?: string;

  onReady?: () => void;

  onError?: (error: string | Event) => void;

  otherProps?: THTMLScriptElementProps;

  startTrigger?: boolean;

  id?: string;

  appendTo?: string;

  delay?: number;

}

```

- Default Props:

```tsx

  startTrigger = true,

  id = `react-use-script-${new Date().toISOString()}`,

  appendTo = 'head',

  delay = 0,

```

---

## License

react-use-scripts is [MIT licensed](./LICENSE).

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).