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

    0.1.0 • Public • Published

    react-external-scripts

    A server-side utility component that allows you to add external scripts to your server-side render based on what components get rendered.

    Client-side updates are currently not supported.

    Built with React Side Effect.

    Installation

    npm install --save react-external-scripts
    

    Example

    Let's say you want to render (parts) of your web app as an Outlook Add-In.

    Client-Side

    Wrap those parts in an AddInContainer that adds the office.js and dependencies as external scripts.

    import ExternalScripts from 'react-external-scripts'
     
    export default const AddInContainer = ({ children}) => (
      <ExternalScripts scripts=[{
        'https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js', // or
        { url: 'https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js', async: true, defer: false }
      }]>
        { children }
     </ExternalScripts>
    )

    Server-Side

    This example uses koa@2 and implements the server-side rendering of external scripts as a koa-middleware.

    Use ExternalScripts.rewind() to collect all external scripts rendered in components

      app.use(async function externalScripts(ctx, next) {
        await next()
     
        const scripts = ExternalScripts.rewind()
     
        if (scripts.length > 0 && ctx.body && ctx.body.indexOf) {
          const idx = ctx.body.indexOf('</head>')
     
          ctx.body = [
            ctx.body.substr(0, idx),
            scripts.map(script => {
              const asyncAttr = script.async ? ' async' : ''
              const deferAttr = script.defer ? ' defer' : ''
     
              return `<script type="text/javascript" src="${script.url}"${asyncAttr}${deferAttr}></script>`
            }).join(''),
            ctx.body.substr(idx)
          ].join('')
        }
      })

    API

    export interface IScriptDefinition {
        url: String;
        async?: boolean;
        defer?: boolean;
    };
     
    export interface IExternalScriptsProps {
        children?: React.ReactNode;
        scripts?: Array<string | IScriptDefinition>;
    };
     
    declare var ExternalScripts: React.ComponentClass<IExternalScriptsProps> & {
      rewind() : Array<string | IScriptDefinition>
    };
    export default ExternalScripts;

    License

    This project is licensed under the terms of the MIT License

    Install

    npm i react-external-scripts

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • kmees