https://github.com/zenoo/react-append-head

Append JS & CSS files to the document's head without duplicates
https://github.com/zenoo/react-append-head

react script

Last synced: about 1 month ago
JSON representation

Append JS & CSS files to the document's head without duplicates

• Host: GitHub
• URL: https://github.com/zenoo/react-append-head
• Owner: Zenoo
• Created: 2019-09-17T10:27:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T12:17:11.000Z (about 2 years ago)
• Last Synced: 2024-08-09T18:56:04.186Z (5 months ago)
• Topics: react, script
• Language: JavaScript
• Homepage:
• Size: 629 KB
• Stars: 5
• Watchers: 4
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# react-append-head

If your react components ever need to add tags to your app's `` section, this is the component for you !  

## AppendHead

You can use AppendHead inside any React app:

```jsx

import React from 'react';

import AppendHead from 'react-append-head';

class Alert extends React.Component {

  constructor(props) {

    super(props);

  }

  render() {

    return (

      


        

          

          

          

        

        {this.props.children}

      

    );

  }

}

```


Any direct child inside the `AppendHead` component will be transferred to the app's `` section.

## Script duplicates

Every script/stylesheet must have a `name` attribute.  

It is used to avoid loading the same script multiple times.  

Only the first combination of script/name or stylesheet/name will be imported.

Example: 

```html

```

## Loading script dependencies

If you need to load scripts in specific order, simply add the attribute `order` to your scripts, they will be loaded from the lowest to the highest.  

If you don't specify the `order` attribute, the script will start loading asynchronously, as soon as possible.

Example: 

```html

```

## onLoad

You can add a callback via the `onLoad` prop on `AppendHead` to execute some code after every queued ressource has been loaded.

```jsx

  ...

```

## Debug

You can add the `debug` prop to `AppendHead` to see what's going on in the console.

```jsx

  ...

```