Prettify docs

Also, remove section about importing directly from the CJS build because it will use a different context object than the ESM build and might trip some people up.
meadow · Sep 30, 2018 · f3ef7f4 · f3ef7f4
1 parent 6460fe0
commit f3ef7f4
Show file tree

Hide file tree

Showing 35 changed files with 616 additions and 657 deletions.
diff --git a/packages/react-router-dom/docs/api/BrowserRouter.md b/packages/react-router-dom/docs/api/BrowserRouter.md
@@ -52,7 +52,7 @@ const supportsHistory = 'pushState' in window.history
 The length of `location.key`. Defaults to 6.
 
 ```jsx
-<BrowserRouter keyLength={12}/>
+<BrowserRouter keyLength={12} />
 ```
 
 ## children: node

diff --git a/packages/react-router-dom/docs/api/Link.md b/packages/react-router-dom/docs/api/Link.md
@@ -13,24 +13,27 @@ import { Link } from 'react-router-dom'
 A string representation of the location to link to, created by concatenating the location's pathname, search, and hash properties.
 
 ```jsx
-<Link to='/courses?sort=name'/>
+<Link to="/courses?sort=name" />
 ```
 
 ## to: object
 
 An object that can have any of the following properties:
-  * `pathname`: A string representing the path to link to.
-  * `search`: A string representation of query parameters.
-  * `hash`: A hash to put in the URL, e.g. `#a-hash`.
-  * `state`: State to persist to the `location`.
+
+- `pathname`: A string representing the path to link to.
+- `search`: A string representation of query parameters.
+- `hash`: A hash to put in the URL, e.g. `#a-hash`.
+- `state`: State to persist to the `location`.
 
 ```jsx
-<Link to={{
-  pathname: '/courses',
-  search: '?sort=name',
-  hash: '#the-hash',
-  state: { fromDashboard: true }
-}}/>
+<Link
+  to={{
+    pathname: "/courses",
+    search: "?sort=name",
+    hash: "#the-hash",
+    state: { fromDashboard: true }
+  }}
+/>
 ```
 
 ## replace: bool
@@ -56,4 +59,3 @@ const refCallback = node => {
 ## others
 
 You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `className`, etc.
-
diff --git a/packages/react-router-dom/docs/api/NavLink.md b/packages/react-router-dom/docs/api/NavLink.md
@@ -13,10 +13,9 @@ import { NavLink } from 'react-router-dom'
 The class to give the element when it is active. The default given class is `active`. This will be joined with the `className` prop.
 
 ```jsx
-<NavLink
-  to="/faq"
-  activeClassName="selected"
->FAQs</NavLink>
+<NavLink to="/faq" activeClassName="selected">
+  FAQs
+</NavLink>
 ```
 
 ## activeStyle: object
@@ -27,32 +26,32 @@ The styles to apply to the element when it is active.
 <NavLink
   to="/faq"
   activeStyle={{
-    fontWeight: 'bold',
-    color: 'red'
-   }}
->FAQs</NavLink>
+    fontWeight: "bold",
+    color: "red"
+  }}
+>
+  FAQs
+</NavLink>
 ```
 
 ## exact: bool
 
 When `true`, the active class/style will only be applied if the location is matched exactly.
 
 ```jsx
-<NavLink
-  exact
-  to="/profile"
->Profile</NavLink>
+<NavLink exact to="/profile">
+  Profile
+</NavLink>
 ```
 
 ## strict: bool
 
 When `true`, the trailing slash on a location's `pathname` will be taken into consideration when determining if the location matches the current URL. See the [`<Route strict>`](../../../react-router/docs/api/Route.md#strict-bool) documentation for more information.
 
 ```jsx
-<NavLink
-  strict
-  to="/events/"
->Events</NavLink>
+<NavLink strict to="/events/">
+  Events
+</NavLink>
 ```
 
 ## isActive: func
@@ -84,12 +83,12 @@ To compare to a different location, a [`location`](../../../react-router/docs/ap
 
 The value of the `aria-current` attribute used on an active link. Available values are:
 
-* `"page"` - used to indicate a link within a set of pagination links
-* `"step"` - used to indicate a link within a step indicator for a step-based process
-* `"location"` - used to indicate the image that is visually highlighted as the current component of a flow chart
-* `"date"` - used to indicate the current date within a calendar
-* `"time"` - used to indicate the current time within a timetable
-* `"true"` - used to indicate if the NavLink is active
+- `"page"` - used to indicate a link within a set of pagination links
+- `"step"` - used to indicate a link within a step indicator for a step-based process
+- `"location"` - used to indicate the image that is visually highlighted as the current component of a flow chart
+- `"date"` - used to indicate the current date within a calendar
+- `"time"` - used to indicate the current time within a timetable
+- `"true"` - used to indicate if the NavLink is active
 
 Defaults to `"page"`.
 

diff --git a/packages/react-router-dom/docs/guides/basic-components.md b/packages/react-router-dom/docs/guides/basic-components.md
@@ -5,28 +5,29 @@ There are three types of components in React Router: router components, route ma
 All of the components that you use in a web application should be imported from `react-router-dom`.
 
 ```js
-import { BrowserRouter, Route, Link } from 'react-router-dom'
+import { BrowserRouter, Route, Link } from "react-router-dom";
 ```
 
 ## Routers
 
 At the core of every React Router application should be a router component. For web projects, `react-router-dom` provides `<BrowserRouter>` and `<HashRouter>` routers. Both of these will create a specialized `history` object for you. Generally speaking, you should use a `<BrowserRouter>` if you have a server that responds to requests and a `<HashRouter>` if you are using a static file server.
 
 ```jsx
-import { BrowserRouter } from 'react-router-dom'
-ReactDOM.render((
+import { BrowserRouter } from "react-router-dom";
+ReactDOM.render(
   <BrowserRouter>
-    <App/>
-  </BrowserRouter>
-), holder)
+    <App />
+  </BrowserRouter>,
+  holder
+);
 ```
 
 ## Route Matching
 
 There are two route matching components: `<Route>` and `<Switch>`.
 
 ```js
-import { Route, Switch } from 'react-router-dom'
+import { Route, Switch } from "react-router-dom";
 ```
 
 Route matching is done by comparing a `<Route>`'s `path` prop to the current location's `pathname`. When a `<Route>` matches it will render its content and when it does not match, it will render `null`. A `<Route>` with no path will always match.
@@ -42,21 +43,21 @@ You can include a `<Route>` anywhere that you want to render content based on th
 
 ```jsx
 <Switch>
-  <Route exact path='/' component={Home}/>
-  <Route path='/about' component={About}/>
-  <Route path='/contact' component={Contact}/>
+  <Route exact path="/" component={Home} />
+  <Route path="/about" component={About} />
+  <Route path="/contact" component={Contact} />
 </Switch>
 ```
 
 The `<Switch>` is not required for grouping `<Route>`s, but it can be quite useful. A `<Switch>` will iterate over all of its children `<Route>` elements and only render the first one that matches the current location. This helps when multiple route's paths match the same pathname, when animating transitions between routes, and in identifying when no routes match the current location (so that you can render a "404" component).
 
 ```jsx
 <Switch>
-  <Route exact path='/' component={Home}/>
-  <Route path='/about' component={About}/>
-  <Route path='/contact' component={Contact}/>
+  <Route exact path="/" component={Home} />
+  <Route path="/about" component={About} />
+  <Route path="/contact" component={Contact} />
   {/* when none of the above match, <NoMatch> will be rendered */}
-  <Route component={NoMatch}/>
+  <Route component={NoMatch} />
 </Switch>
 ```
 
@@ -67,48 +68,50 @@ You have three prop choices for how you render a component for a given `<Route>`
 `component` should be used when you have an existing component (either a `React.Component` or a stateless functional component) that you want to render. `render`, which takes an inline function, should only be used when you have to pass in-scope variables to the component you want to render. You should **not** use the `component` prop with an inline function to pass in-scope variables because you will get undesired component unmounts/remounts.
 
 ```jsx
-const Home = () => <div>Home</div>
+const Home = () => <div>Home</div>;
 
 const App = () => {
   const someVariable = true;
-  
+
   return (
     <Switch>
       {/* these are good */}
-      <Route exact path='/' component={Home} />
+      <Route exact path="/" component={Home} />
       <Route
-        path='/about'
-        render={(props) => <About {...props} extra={someVariable} />}
+        path="/about"
+        render={props => <About {...props} extra={someVariable} />}
       />
       {/* do not do this */}
       <Route
-        path='/contact'
-        component={(props) => <Contact {...props} extra={someVariable} />}
-      />  
+        path="/contact"
+        component={props => <Contact {...props} extra={someVariable} />}
+      />
     </Switch>
-  )
-}
+  );
+};
 ```
 
 ## Navigation
 
 React Router provides a `<Link>` component to create links in your application. Wherever you render a `<Link>`, an anchor (`<a>`) will be rendered in your application's HTML.
 
 ```jsx
-<Link to='/'>Home</Link>
+<Link to="/">Home</Link>
 // <a href='/'>Home</a>
 ```
 
 The `<NavLink>` is a special type of `<Link>` that can style itself as "active" when its `to` prop matches the current location.
 
 ```jsx
 // location = { pathname: '/react' }
-<NavLink to='/react' activeClassName='hurray'>React</NavLink>
+<NavLink to="/react" activeClassName="hurray">
+  React
+</NavLink>
 // <a href='/react' className='hurray'>React</a>
 ```
 
 Any time that you want to force navigation, you can render a `<Redirect>`. When a `<Redirect>` renders, it will navigate using its `to` prop.
 
 ```jsx
-<Redirect to='/login'/>
+<Redirect to="/login" />
 ```
diff --git a/packages/react-router-dom/docs/guides/code-splitting.md b/packages/react-router-dom/docs/guides/code-splitting.md
@@ -6,25 +6,21 @@ One great feature of the web is that we don't have to make our visitors download
 
 ```json
 {
-  "presets": [
-    "react"
-  ],
-  "plugins": [
-    "syntax-dynamic-import"
-  ]
+  "presets": ["react"],
+  "plugins": ["syntax-dynamic-import"]
 }
 ```
 
 [`react-loadable`] is a higher-order component for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple! Here's an example of how to use [`react-loadable`]:
 
 ```jsx
-import Loadable from 'react-loadable';
-import Loading from './Loading';
+import Loadable from "react-loadable";
+import Loading from "./Loading";
 
 const LoadableComponent = Loadable({
-  loader: () => import('./Dashboard'),
-  loading: Loading,
-})
+  loader: () => import("./Dashboard"),
+  loading: Loading
+});
 
 export default class LoadableDashboard extends React.Component {
   render() {
@@ -41,22 +37,23 @@ That's all there is to it! Simply use `LoadableDashboard` (or whatever you named
 
 ```json
 {
-  "presets": [
-    "react"
-  ],
+  "presets": ["react"],
   "plugins": [
     "syntax-dynamic-import",
-    ["import-inspector", {
-      "serverSideRequirePath": true
-    }]
+    [
+      "import-inspector",
+      {
+        "serverSideRequirePath": true
+      }
+    ]
   ]
 }
 ```
 
-  [Babel]: https://babeljs.io/
-  [`babel-plugin-syntax-dynamic-import`]: https://babeljs.io/docs/plugins/syntax-dynamic-import/
-  [`babel-plugin-import-inspector`]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#babel-plugin-import-inspector
-  [`react-loadable`]: https://github.com/thejameskyle/react-loadable
-  [import]: https://github.com/tc39/proposal-dynamic-import
-  [webpack]: https://webpack.js.org/
-  [ssr]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#server-side-rendering
+[babel]: https://babeljs.io/
+[`babel-plugin-syntax-dynamic-import`]: https://babeljs.io/docs/plugins/syntax-dynamic-import/
+[`babel-plugin-import-inspector`]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#babel-plugin-import-inspector
+[`react-loadable`]: https://github.com/thejameskyle/react-loadable
+[import]: https://github.com/tc39/proposal-dynamic-import
+[webpack]: https://webpack.js.org/
+[ssr]: https://github.com/thejameskyle/react-loadable/tree/6902cc87f618446c54daa85d8fecec6836c9461a#server-side-rendering