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
