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 +};