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

Last Updated : 23 Jul, 2025

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 a react app. 

Prerequisites:

Steps to Import React-Select CDN with React and Babel:

Step 1: Create index.html with HTML boilerplate having required HTML tags.

Step 2: Add below CND links in the Head Tag to Import the React-Select, React and Babel in the application

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.26.0/babel.min.js"></script>

Step 3: Add the react code in the script tag and start using the application.

Project Structure:

folder structure

Example: This example uses CDN links to import the React-Select with React and Babel in the html file. 

index.html 
<!-- Filename - index.html -->

<html>
  
<head>
    <meta charset="utf-8">
  
      <!-- CDN for React and React-DOM-->
    <script src=
"https://unpkg.com/react@16.7.0/umd/react.production.min.js">
    </script>
    <script src=
"https://unpkg.com/react-dom@16.7.0/umd/react-dom.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/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>
  
      <!-- CDN for React-Select-->
    <script src=
"https://unpkg.com/react-select@2.1.2/dist/react-select.min.js">
    </script>
  
    <!-- CDN for Babel-->
    <script src=
"https://unpkg.com/babel-standalone@6.26.0/babel.min.js">
    </script>
  
      <!-- Link Stylesheet -->
    <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">
    
      {/* React Code */} 
      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>
CSS 
/* Filename - index.css */

.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
Comment

Explore