I wanted to use the React Virtualized Select to show almost around 1 million records in a select dropdown. I have already created the project based on flask and angularjs. I wasn't able to find any resources for such a dropdown through angularjs, so I came to the decision to use react.js with angular.js to get this select dropdown.
Coming to my question, please find below the code I have tried till now. Since I am not using nodeJS I cant use "require" or "include" which play a major role for these dropdowns, but luckily they had provided UMD javascript files for "react-virtualized-select", so I included these scripts in the end of the HTML body, but when I run the code I am getting the error in the console as
embedded:20 Uncaught ReferenceError: VirtualizedSelect is not defined
Could someone tell me if I am implementing react the proper way or is there something I am understand wrong about UMD files? Thanks in advance.
Update: I have created a JS Fiddle highlighting the issue, I have also made some changes to the code based on comments from SO.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react- select/1.0.0-beta14/react-select.min.css">
<link rel="stylesheet" href="./VirtualizedSelect.css">
</head>
<body>
<div id='root'/>
<Application/>
<script type="text/javascript" src="https://npmcdn.com/[email protected]/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/classnames/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-input-autosize/dist/react-input-autosize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-select/1.0.0-beta14/react-select.js"></script>
<script type="text/javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-virtualized/7.0.0/react-virtualized.min.js"></script>
<script type="text/javascript" src="./react-virtualized-select.js"></script>//UMD File from GITHUB
<script type="text/babel">
class Application extends React.Component {
constructor (props) {
super(props)
this.state = {}
}
render () {
const options = [
{ label: 'one', value: 'One' },
{ label: 'two', value: 'Two' },
{ label: 'three', value: 'Three' },
{ label: 'four', value: 'Four' },
{ label: 'five', value: 'Five' },
{ label: 'six', value: 'Six', disabled: true }
// And so on...
]
return (
<VirtualizedSelect options={options} onChange={(selectValue) => this.setState({ selectValue })} value={this.state.selectValue}/>
)
}
}
ReactDOM.render(
<Application/>,
document.getElementById('root')
);
</script>
It's really hard to help you on this since I can't test the code.
But it's probably because you don't specify the 'package' for VirtualizedSelect.
Try <Foo.VirtualizedSelect ...
You can find Foo in the .js file, it looks something like exports.Foo
If I for example want to use VirtualScroll from react-virtualized.min.js I would need to write <ReactVirtualized.VirtualScroll .. since the file states exports.ReactVirtualized. If I dont I get the same error as you got.
Edit:
This is not the best solution but it's a solution. Since the 'package' is exported as react-virtualized-select and you're not allowed minuses in javascript names you can "import" it as follows:
const VirtualizedSelect = window["react-virtualized-select"].default;
and use it as you did at first:
<VirtualizedSelect options={options} ... />