diff --git a/docs/importing-js-into-reason.md b/docs/importing-js-into-reason.md
index 7f38c69e0..9b177a93e 100644
--- a/docs/importing-js-into-reason.md
+++ b/docs/importing-js-into-reason.md
@@ -22,3 +22,52 @@ module Greeting = {
let make = () =>
;
```
+
+### Default props and JavaScript components
+
+Sometimes you need your JavaScript component to have a default prop. How you
+handle this will depend on the details of the situation.
+
+#### Scenario 1: The JavaScript component prop is already coded to have a default
+
+```js
+function Greeting({ name }) {
+ return Hey {name}
+};
+
+Greeting.defaultProps = {
+ name: "John"
+};
+```
+
+Props (or any function argument) with a default is just an optional prop as far
+as its signature is concerned. To bind to it, we just make the prop optional.
+
+```reason
+module Greeting = {
+ [@bs.module "./Greeting.js"] [@react.component]
+ external make: (~name: string=?) => React.element = "default";
+};
+```
+
+(Note that function signatures are only concerned with types, not values. Code
+like `external make: (~name="Peter") => React.element` is a syntax error.
+`"Peter"` is a value, whereas `string` is a type.)
+
+#### Scenario 2: The JavaScript component prop doesn't have a default, but we want to add one
+
+In JavaScript, the logic for default arguments is handled at runtime inside the
+function body. If our external does not already have a default, we'll need to
+wrap it with our own component to add the logic.
+
+```reason
+module GreetingJs = {
+ [@bs.module "./Greeting.js"] [@react.component]
+ external make: (~name: string) => React.element = "default";
+};
+
+module Greeting = {
+ [@react.component]
+ let make = (~name="Peter") => ;
+};
+```