Skip to content

Commit 48953ce

Browse files
committed
Add note on default/member/namespace imports
1 parent c55d0be commit 48953ce

File tree

1 file changed

+6
-2
lines changed

1 file changed

+6
-2
lines changed

docs/using-third-party-react-components.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,19 @@ type SomeComponentProps =
6666

6767
Using the `ofImport` function you instruct Fable which component should be instantiated when the creation function is called.
6868

69-
In the example of rc-progress, to declare a `progressLine` creation function that imports the `Line` component from the library `rc-progress`, you would declare it as follows.
69+
There are several different ways to declare exports in Javascript (default imports, member imports, namespace imports); depending on how the Javascript React component was declared, you have to choose the right import. Refer to the [Fable docs](http://fable.io/docs/interacting.html#importing-javascript-code) for more information on imports.
7070

71-
Note the `keyValueList` function that is used to convert the props of type `IProgressProps list` to a Javascript object where they key is the lower case name of the DU case identifier and the value is the field value of the DU (e.g. if the list that is passed into the function is `[Percent 40; StrokeColor "red"]`, the Javascript object that will be passed to the `props` of the `Line` react component would look like this: `{ percent: 40, strokeColor: "red" }`)
71+
In the example of rc-progress, to declare a `progressLine` creation function that imports the `Line` component from the library `rc-progress`, you would declare it as follows.
7272

7373
```fsharp
7474
let inline progressLine (props : ProgressProps list) (elems : ReactElement list) : ReactElement =
7575
ofImport "Line" "rc-progress" (keyValueList CaseRules.LowerFirst props) elems
7676
```
7777

78+
Note the `keyValueList` function that is used to convert the props of type `IProgressProps list` to a Javascript object where they key is the lower case name of the DU case identifier and the value is the field value of the DU (e.g. if the list that is passed into the function is `[Percent 40; StrokeColor "red"]`, the Javascript object that will be passed to the `props` of the `Line` react component would look like this: `{ percent: 40, strokeColor: "red" }`)
79+
80+
In the docs of the [rc-progress React components](https://github.com/react-component/progress) the import styled used is a *member import*, so we use refer to the component member directly in the ofImport expression.
81+
7882
### 4. Use the creation function in your view code
7983

8084
The function you declared in step 2 now behaves just like any other React component function.

0 commit comments

Comments
 (0)