diff --git a/.gitignore b/.gitignore
index f49acea..ac8d13d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -66,4 +66,5 @@ typings/
lib
.merlin
-*.bs.js
\ No newline at end of file
+.bsb.lock
+*.bs.js
diff --git a/README.md b/README.md
index 59079dd..f29bab7 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,22 @@
# Deprecated
This is the Reason interop wrapper for [React Router](https://reacttraining.com/react-router/). **Note** that ReasonReact itself [already comes with a router](https://reasonml.github.io/reason-react/docs/en/router.html).
+
+## Install
+
+```bash
+npm install --save bs-react-router
+```
+
+Add `bs-react-router` to your `bs-dependencies`: **bsconfig.json**
+
+```bash
+{
+ ...
+ "bs-dependencies": ["bs-react-router"]
+}
+```
+
+## Example
+
+See [examples](./examples) folder.
diff --git a/bsconfig.json b/bsconfig.json
index cdc3421..2e5abce 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -3,7 +3,12 @@
"namespace": true,
"sources": [
{
- "dir": "src"
+ "dir": "src",
+ "public": "all"
+ },
+ {
+ "dir": "examples",
+ "type": "dev"
}
],
"bsc-flags": ["-bs-super-errors"],
diff --git a/examples/reason_react_router.re b/examples/reason_react_router.re
new file mode 100644
index 0000000..cb932b7
--- /dev/null
+++ b/examples/reason_react_router.re
@@ -0,0 +1,49 @@
+open ReactRouter;
+
+module HomePage = {
+ let component = ReasonReact.statelessComponent("HomePage");
+ let make = (_children) => {
+ ...component,
+ render: (_self) =>
+
{ReasonReact.stringToElement("Home page")}
+ }
+};
+
+module UserPage = {
+ let component = ReasonReact.statelessComponent("UserPage");
+ let make = (_children) => {
+ ...component,
+ render: (_self) =>
+ {ReasonReact.stringToElement("User page")}
+ }
+};
+
+module App = {
+ let component = ReasonReact.statelessComponent("App");
+ let blueStyle = ReactDOMRe.Style.make(~color="#000099", ());
+
+ let make = (_children) => {
+ ...component,
+ render: (_self) =>
+
+
+
+
{ReasonReact.stringToElement("Using NavLink")}
+ {ReasonReact.stringToElement("Home")}
+ {ReasonReact.stringToElement("User")}
+
+ {ReasonReact.stringToElement("Using Link")}
+ {ReasonReact.stringToElement("Home")}
+ {ReasonReact.stringToElement("User")}
+
+
+ /* Component as Prop can't trivially pass
+ so we pass a callback as a component to send the whole component */
+ ) />
+ ) />
+
+
+
+
+ };
+};
diff --git a/package-lock.json b/package-lock.json
index c5496c0..a48c07d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "bs-react-router",
- "version": "1.1.1",
+ "version": "1.1.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -22,17 +22,6 @@
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
"dev": true
},
- "create-react-class": {
- "version": "15.6.2",
- "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz",
- "integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=",
- "dev": true,
- "requires": {
- "fbjs": "0.8.16",
- "loose-envify": "1.3.1",
- "object-assign": "4.1.1"
- }
- },
"encoding": {
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
@@ -174,12 +163,11 @@
}
},
"react": {
- "version": "15.6.2",
- "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
- "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
+ "version": "16.2.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz",
+ "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==",
"dev": true,
"requires": {
- "create-react-class": "15.6.2",
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
"object-assign": "4.1.1",
@@ -187,9 +175,9 @@
}
},
"react-dom": {
- "version": "15.6.2",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
- "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
+ "version": "16.2.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
+ "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==",
"dev": true,
"requires": {
"fbjs": "0.8.16",
@@ -228,13 +216,13 @@
}
},
"reason-react": {
- "version": "0.3.0",
- "resolved": "https://registry.npmjs.org/reason-react/-/reason-react-0.3.0.tgz",
- "integrity": "sha512-8PSJbLY+zv3x9gyQMnoMGEjSL+OTkK92ukjRZSMbF4lOsdFatpaxB7P8ybuQnMtpnRN6JCFPBddumHoBtABlQA==",
+ "version": "0.3.1",
+ "resolved": "https://registry.npmjs.org/reason-react/-/reason-react-0.3.1.tgz",
+ "integrity": "sha512-T5BPJw/D/ezUAVjB2C4awpj4J88Zrp1XhV3z4xe6n0bdBBctXY2HV5G7AmberzABaspIVQnsKmfkd+fl+T613w==",
"dev": true,
"requires": {
- "react": "15.6.2",
- "react-dom": "15.6.2"
+ "react": "16.2.0",
+ "react-dom": "16.2.0"
}
},
"resolve-pathname": {
diff --git a/package.json b/package.json
index df17a8c..d835a88 100644
--- a/package.json
+++ b/package.json
@@ -26,12 +26,12 @@
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
- "reason-react": "^0.3.0"
+ "reason-react": "^0.3.1"
},
"peerDependencies": {
"bs-platform": "^2.1.0",
- "react-router": ">=4.2.0",
- "react-router-dom": ">=4.2.0",
+ "react-router": "^4.1.1",
+ "react-router-dom": "^4.1.1",
"reason-react": "^0.3.0"
}
}
diff --git a/src/reactRouter.re b/src/reactRouter.re
index e4008f9..0526e12 100644
--- a/src/reactRouter.re
+++ b/src/reactRouter.re
@@ -40,6 +40,32 @@ module Route = {
);
};
+module Switch = {
+ [@bs.module "react-router-dom"] external reactClass : ReasonReact.reactClass = "Switch";
+ let make = (children) =>
+ ReasonReact.wrapJsForReason(
+ ~reactClass,
+ ~props=Js.Obj.empty(),
+ children
+ );
+};
+
+module Link = {
+ [@bs.module "react-router-dom"] external link : ReasonReact.reactClass = "Link";
+ let make =
+ (
+ ~_to: string,
+ children
+ ) =>
+ ReasonReact.wrapJsForReason(
+ ~reactClass=link,
+ ~props={
+ "to": _to
+ },
+ children
+ );
+};
+
module Redirect = {
[@bs.module "react-router-dom"]
external reactClass : ReasonReact.reactClass = "Redirect";
@@ -50,10 +76,22 @@ module Redirect = {
module NavLink = {
[@bs.module "react-router-dom"]
external navLink : ReasonReact.reactClass = "NavLink";
- let make = (~_to: string, children) =>
+ let make =
+ (
+ ~_to: string,
+ ~activeClassName: option(string)=?,
+ ~style: option(ReactDOMRe.style)=?,
+ ~activeStyle: option(ReactDOMRe.style)=?,
+ children
+ ) =>
ReasonReact.wrapJsForReason(
~reactClass=navLink,
- ~props={"to": _to},
+ ~props={
+ "to": _to,
+ "activeClassName": Js.Null_undefined.from_opt(activeClassName),
+ "style": Js.Null_undefined.from_opt(style),
+ "activeStyle": Js.Null_undefined.from_opt(activeStyle)
+ },
children
);
};
@@ -78,4 +116,4 @@ module ServerRouter = {
~props={"context": context, "location": location},
children
);
-};
\ No newline at end of file
+};