Skip to content
Related Articles

Related Articles

How to import from React-Select CDN with React and Babel ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 17 Mar, 2022

In ReactJs, import from React-Select CDN is not done in a simple way as we do with the npm packages. To use them we need to use directly them in the HTML file. It does not work with the project set-up by creating react app. 

CDN Links: To import and use React-Select with CDN with React and Babel we will take an HTML file including all the CDN links given below:

<script src=”https://unpkg.com/react@16.7.0/umd/react.production.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/emotion@9.2.12/dist/emotion.umd.min.js”></script>
<script src=”https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js”></script>
<script src=”https://unpkg.com/prop-types@15.5.10/prop-types.min.js”></script>
<script src=”https://unpkg.com/react-input-autosize@2.2.1/dist/react-input-autosize.min.js”></script>
<script src=”https://unpkg.com/react-select@2.1.2/dist/react-select.min.js”></script>
<script src=”https://unpkg.com/babel-standalone@6/babel.min.js”></script>

Example: Following example covers how to import from React-Select CDN with React and Babel.

Project Setup: Create a folder named example and move inside that folder and create files index.html and index.css. The project Structure will look like this.

folder structure

 

index.html




<html>
<head>
    <meta charset="utf-8">
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href="./index.css">
    <title>React Select CDN with React and Babel</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
      const options = [
        { value: 'Jan', label: 'Jan' },
        { value: 'Feb', label: 'Feb' },
        { value: 'Mar', label: 'Mar' }
      ];
  
      class App extends React.Component {
        state = {
          option: null,
        }
        fun = (option) => {
          this.setState({ option });
        }
        render() {
          const { option } = this.state;
  
          return (
            <div class="container">
              Select the one
              <Select
                value={option}
                onChange={this.fun}
                options={options}
              />
              <div class="small">Option selected: </div>
              {option && option.label}
            </div>
          );
        }
      }
        
      ReactDOM.render(<App />, document.querySelector("#root"))
    </script>
</body>
</html>

index.css Add these stylings into the CSS file.

index.css




/* Write CSS Here */
.container
{
    width: 40%;
    margin: 0 auto;
}
  
.small
{
    margin: 20px;
}

Step to run the application: Open the HTML file in the browser or if having a lite server open it.

Output: Here, we are able to use the react-select with the CDN link.

 import from React-Select CDN with React and Babel

import from React-Select CDN with React and Babel


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!