score:2
is there a way such that - for example - i can locally
npm run build
the needed module,react-datepicker
, and then call the react api from my script as shown above?
yes, there is a well known solution!
write an index.js as follows
import react from "react";
import datepicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";
export {importedcomponent}
window.mydatepicker = function mydatepicker(props) {
console.log("props from window.mydatepicker", props)
return react.createelement( datepicker, props );
}
build via npm
and copy the static folder from the build of your by npm run build
to the spa folder of your proj
copy
the 3 script tags from the index.html in the build into the index.html template of your proj
and
<div id="root"></div>
(of course you use a different id for your project app and
there will be nothing to render here)
in my case they are (they will be different for you)
<div id="root"></div>
<script>!function(e){function t(t){for(var n,l,p=t[0],f=t[1],i=t[2],c=0,s=[];c<p.length;c++)l=p[c],object.prototype.hasownproperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)object.prototype.hasownproperty.call(f,n)&&(e[n]=f[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,p=1;p<r.length;p++){var f=r[p];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||object.defineproperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof symbol&&symbol.tostringtag&&object.defineproperty(e,symbol.tostringtag,{value:"module"}),object.defineproperty(e,"__esmodule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esmodule)return e;var r=object.create(null);if(l.r(r),object.defineproperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esmodule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return object.prototype.hasownproperty.call(e,t)},l.p="/";var p=this.webpackjsonpcontent_npm=this.webpackjsonpcontent_npm||[],f=p.push.bind(p);p.push=t,p=p.slice();for(var i=0;i<p.length;i++)t(p[i]);var a=f;r()}([])</script>
<script src="/static/js/2.a6e4c224.chunk.js"></script>
<script src="/static/js/main.b075c560.chunk.js"></script>
now go with
datepicker=react$1.createelement(window.mydatepicker,{
selected:mydate,
onchange:p$1[1],
showtimeselect: true,
});
in you spa.js and enjoy any react component like this one from websharper.react!
btw i had to pass a js date, not a moment date here in the selected
of props
, i'm not sure why, anyway, this is not relevant to the problem.
fyi, this is the f# code from websharper project
let mydate, setmydate = wrapreact.usestate (datetime.today.js)
let importdatepicker = js.eval("window.mydatepicker") :?> react.class
let propdp =
{
selected = mydate
onchange = setmydate
showtimeselect = true
}
let datepicker =
react.createelement( importdatepicker, propdp)
wrapreact.setcount <- setcount
div [] [
datepicker
p [] [html.textf "you selected %s date %s time" (mydate.todatestring()) (mydate.totimestring())]
full open source project shared on github.
score:0
i think that the main problem is that websharper scripts are not javascript modules. in that case it should be immediate to import an external module or make the above spa.js
as the webpack
main entry. in fact it is well known that there are differences between <script type=module>
and <script>
- module script execute in strict mode
- module script has its own scope
- module script can import other javascript modules
- module script has this as undefined
- inline module script can have async attribute
- module script is always deferred
as confirmed by adam granicz indeed on websharper side:
that should be the way, yes, @jand42 and others have been working on changing the current output to support modules and a better ts interoperability - this has been on the agenda for years, so closing it would be a good step forward
(in the meantime there are of course alternatives, e.g. flatpickr, which has bindings also for jquery, instead of react-datepicker
or pure react or f# fable instead of websharper.react and so on)
Source: stackoverflow.com
Related Query
- Creating a DatePicker from CDN with React API
- Creating dynamic table with data fetched from API in JS React Bootstrap
- Creating a recursive function for getting data from a paginated API with Fetch API on React
- Paginate date-specific results from an API with React and Redux
- How to import from React-Select CDN with React and Babel?
- React query mutation: getting the response from the server with onError callback when the API call fails
- Uploading images from react with laravel api
- Fetching from API endpoint with React returns value undefined
- Creating an array in React with objects created from two lists
- React images caption error from api maybe to do with correct Index
- Creating a YouTube playlist with React using Google's API
- Empty response from API with React
- Fill context from REST API and use it in a React component with useEffect and useContext
- Fetch API not working with Rails + React from Webpacker
- use axios with react to get data from api
- React redux frontend not fetching data from Django API with axios
- With React useState how do you access key values of an array returned from fetch API
- React problem with getting image from API
- How to load and display data with React from an API running on localhost
- Sending response of multiple api calls from action to view file in react js with redux
- React - Dealing with undefined state when mapping over an array of objects from API
- How to send FormData attribute with an array of strings from React Client to Django + Django Rest Framework API
- Extracting data from json object from API with JavaScript React Native
- Requesting user information from api with axios in react
- Fetch request to Cloudinary API from with React Component fails
- I am using unsplash-js api from NPM with react
- Get from api react with useState, useEffect
- Passing int values from one react component to another with Google Maps API
- How to render a list of users from ReqRes API with React
- I have spent the last 8 hours trying to pass a simple JSON object with some data from an api through my express backend to one of my react components
More Query from same tag
- Redux + React + FireBase: how to use a state when updating
- superset ui chart type is not register
- Reassigning state from props value
- Material dataTable
- Redirect happens before onClick() on REACT { Link }
- Can I turn off create-react-app chunking mechanism?
- React - Too many re-renders when using props
- Trigger Alt Flux Action from legacy javascript framework
- How to dynamically set state with onChange event handler in a functional component
- Could not find "store" in either the context or props of
- Pass function inside string literal to other component
- Formik and yup validation not working for required
- Why it says the `hover:` class does not exist. If `hover:` is a custom class, make sure it is defined within a `@layer` directive?
- Error with && logical operator jsx and typescript
- React - How to pass `ref` from child to parent component?
- Jest test write on textarea input
- Dynamically created svg paths from geojsons are not rendering to a ref
- Stale value of state variable in log
- byRole is not returning the DOM element
- Why isn't JSX saved as a const rendering
- react-table: change background color of rows depending upon row props value
- How would I validate the value from JSON api and convert it into another word in react.js?
- loading CKEditor5 components with React.lazy
- Child Not Re-rendering on List Item Deletion in Parent but Adding to the List Item Triggering Re-render
- Mocking a component method with Jest
- Where should I keep data models in React and Redux?
- getDerivedStateFromProps() overrides setstate value in reactjs
- Sort by date on React database call not working - just returning oldest first
- Fetching from an API and mapping into select in react
- Access children properties (state?) from parent