How to add script tag in React/JSX file?

Question

    private get mouseGestureSettingView() {
    const {selectedMenu} = this.state;
    return ( selectedMenu == 2 ?
      <script src="../../assets/js/extensions/mouse-gesture/options.js"></script>
      
    <div className={styles.settingForm}>
        <h3>Mouse Gesture</h3>
                    <div className={options.opts}>
            <div className={options.opttitle} data-i18ninner={'newadd'}></div>
            <div className={options.optcontent}>
                <form>
                    <input id={'addgesture'} className={options.newadd} type={'button'} value={'newgesturess'}/>
                </form>
            </div>
        </div>
        <div className={options.opts}>
            <div className={options.opttitle} data-i18ninner={'editgesture'}></div>
            <div className={options.optcontent} id={'editgesture'}></div>
        </div>
        <div style={{clear:'both'}}></div>
        </div>
      : null
    );
  }

I want to use inline scripting to a React component. I am trying like this. What should be my approach? I could not find much information. I want to load the script when this component is selected on the app page.

Andrii Starusiev · Accepted Answer · 2017-08-17 13:09:48Z

1

What you need to do is codesplitting.

Without code splitting

+ are loaded at the first start

import Login from './Login'
import Home from './Home'

const App = ({ user }) => (
  <Body>
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
    <Route path="/login" component={Login} />
  </Body>
)

With code splitting:

import Async from 'react-code-splitting'

import Login from './Login'
const Home = () => <Async load={import('./Home')} />
const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/>

const App = ({ user }) => (
  <Body>
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
    <Route path="/login" component={Login} />
    <Route path="/lostpassword" component={LostPassword} />
  </Body>
)

There are several ways of doing this, for example: https://github.com/didierfranc/react-code-splitting

edited Aug 17, 2017 at 13:09

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

answered Aug 17, 2017 at 13:02

joeydebreuk

3842 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

locropulenton · Accepted Answer · 2017-08-18 12:18:04Z

0

Use import or require on the top on a given js file for adding custom scripts or custom css, but I agree that you should review it to be sure everything behaves as you expect.

Example:

import "../../assets/js/extensions/mouse-gesture/options.js";

Or if you want to import a script only when using a method:

myMethod() {
  require("../../assets/js/extensions/mouse-gesture/options.js");
  ...
}

edited Aug 18, 2017 at 12:18

answered Aug 17, 2017 at 13:09

locropulenton

4,8533 gold badges35 silver badges58 bronze badges

1 Comment

Ankur Sardar Over a year ago

I don't want to import this Javascript every time when I am running the App. I just want to import this script only when I am using this method. This is a setting page. SO when I shall click that option then only it should load this JavaScript and render according to that

Ywapom · Accepted Answer · 2019-12-19 17:46:58Z

0

You can try this library: npm install --save react-script-tag

https://www.npmjs.com/package/react-script-tag

import React, { Component } from 'react';
import ScriptTag from 'react-script-tag';

class Demo extends Component {

    render() {
        return (<ScriptTag isHydrating={true} type="text/javascript" src="some_script.js" />);
    }
}

answered Dec 19, 2019 at 17:46

Ywapom

5996 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to add script tag in React/JSX file?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related