Skip to content

Commit e5b475f

Browse files
Add example of importing a react component from JS
There is currently no documentation showing how to import an external react component into ReScript. This commit adds one, adopting an example from https://forum.rescript-lang.org/t/use-reactjs-components-in-rescript-react-project/1992
1 parent 3496595 commit e5b475f

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

pages/docs/manual/latest/import-from-export-to-js.mdx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,53 @@ Js.log(studentName)
9090
import Student from "./student";
9191
var studentName = Student;
9292
```
93+
94+
</CodeTab>
95+
96+
### Import a React Component
9397

98+
<CodeTab labels={["ReScript", "JS Output (ES6)"]}>
99+
100+
```res example
101+
module DatePicker = {
102+
@react.component @module("react-datepicker")
103+
external make: (~date: Js.Date.t, ~onChange: (Js.Date.t) => unit) => React.element = "default"
104+
}
105+
106+
@react.component
107+
let make = () => {
108+
let (date, setDate) = React.useState(Js.Date.make)
109+
<DatePicker date=date onChange={date => setDate(_ => date)} />
110+
}
111+
```
112+
```js
113+
import * as Curry from "./stdlib/curry.js";
114+
import * as React from "react";
115+
import ReactDatepicker from "react-datepicker";
116+
117+
var DatePicker = {};
118+
119+
function Playground(Props) {
120+
var match = React.useState(function () {
121+
return new Date();
122+
});
123+
var setDate = match[1];
124+
return React.createElement(ReactDatepicker, {
125+
date: match[0],
126+
onChange: (function (date) {
127+
return Curry._1(setDate, (function (param) {
128+
return date;
129+
}));
130+
})
131+
});
132+
}
133+
```
134+
94135
</CodeTab>
95136

137+
138+
For more information, see [the React documentation](../../react/latest/introduction.md).
139+
96140
## Export To JavaScript
97141

98142
### Export a Named Value

0 commit comments

Comments
 (0)