Fix typos and anchors in the docs.

CHANGELOG.md

@@ -763,7 +763,7 @@ For highlights about this version, read [the 2.3 release announcement post](http
 
 Deprecations:
 
-* `<Admin>` `menu` prop. To override the menu component, use a [custom layout](#appLayout) instead.
+* `<Admin>` `menu` prop. To override the menu component, use a [custom layout](./docs/Admin.md#layout) instead.
 * `<AppBarMobile>`. The `<AppBar>` component is now responsive.
 * `<BulkActions>`. Use `<BulkActionToolbar>` instead.
 * `<Header>`. Use `<Title>` instead.

UPGRADE.md

@@ -289,7 +289,7 @@ import Button from '@material-ui/core/Button';
 
 -const localeSwitcher = ({ changeLocale }) => 
 +const LocaleSwitcher = () => {
-+   const setLocale = usesetLocale();
++   const setLocale = useSetLocale();
 -   const switchToFrench = () => changeLocale('fr');
 +   const switchToFrench = () => setLocale('fr');
 -   const switchToEnglish = () => changeLocale('en');

docs/Actions.md

@@ -100,7 +100,7 @@ This object updates according to the request state:
 - success: `{ data: [data from response], total: [total from response], loading: false, loaded: true }`
 - error: `{ error: [error from response], loading: false, loaded: true }`
 
-As a reminder, here are the read query types handled by Data Droviders:
+As a reminder, here are the read query types handled by Data Providers:
 
 Type               | Usage                                           | Params format              | Response format
 ------------------ | ------------------------------------------------|--------------------------- | ---------------
@@ -247,7 +247,7 @@ The specialized hooks based on `useMutation` return a callback:
 
 ## Handling Side Effects In `useDataProvider`
 
-`useDataProvider` returns a `dataProvider` object. Each call to its method return a Promise, allowing to add business logic on success in `then()`, and on fialure in `catch()`.
+`useDataProvider` returns a `dataProvider` object. Each call to its method return a Promise, allowing to add business logic on success in `then()`, and on failure in `catch()`.
 
 For instance, here is another version of the `<ApproveButton>`  based on `useDataProvider` that notifies the user of success or failure using the bottom notification banner:
 
@@ -279,7 +279,7 @@ Fetching data is called a *side effect*, since it calls the outside world, and i
 - `useNotify`: Return a function to display a notification. The arguments should be a message (it can be a translation key), a level (either `info` or `warning`), an options object to pass to the `translate()` function, and a boolean to set to `true` if the notification should contain an "undo" button.
 - `useRedirect`: Return a function to redirect the user to another page. The arguments should be the path to redirect the user to, and the current `basePath`.
 - `useRefresh`: Return a function to force a rerender of the current view (equivalent to pressing the Refresh button).
-- `useUnselectAll`: Return a function to unselect all lines in the current datagrid. Pass the name of the resource as argument.
+- `useUnselectAll`: Return a function to unselect all lines in the current `Datagrid`. Pass the name of the resource as argument.
 
 ## Handling Side Effects In Other Hooks
 

docs/AdvancedTutorials.md

@@ -61,7 +61,7 @@ This article shows how you can customize many parts of the framework without rep
 
 ## OpenID Connect Authentication with React Admin
 
-![OpenID Connect on React Admin with a button "Login With Google"](/img/openid-connect-example.png)
+![OpenID Connect on React Admin with a button "Login With Google"](./img/openid-connect-example.png)
 
 * [Live Example](https://marmelab.com/ra-example-oauth)
 * [Code Repository](https://github.com/marmelab/ra-example-oauth)

docs/Authentication.md

@@ -107,7 +107,7 @@ const App = () => (
 );
 ```
 
-Now the admin is secured: The user can be authenticatded and use their credentials to communicate with a secure API. 
+Now the admin is secured: The user can be authenticated and use their credentials to communicate with a secure API. 
 
 If you have a custom REST client, don't forget to add credentials yourself.
 

docs/Authorization.md

@@ -92,7 +92,7 @@ Note that the function returns an array of React elements. This is required to a
 
 You might want to display some fields or inputs only to users with specific permissions. By default, react-admin calls the `authProvider` for permissions for each resource routes, and passes them to the `list`, `edit`, `create`, and `show` components.
 
-Here is an example of a `Create` view with a conditionnal Input based on permissions:
+Here is an example of a `Create` view with a conditional Input based on permissions:
 
 {% raw %}
 ```jsx

docs/DataProviders.md

@@ -52,7 +52,7 @@ const dataProvider = {
 
 You can find an example Data Provider implementation at the end of this chapter.
 
-**Tip**: In react-admin v2, Data Providers used to be functions, not objects. React-admin v3 can detect a legacy Data Provider and wrap an object around it. So Data Providers developped for react-admin v2 still work with react-admin v3.  
+**Tip**: In react-admin v2, Data Providers used to be functions, not objects. React-admin v3 can detect a legacy Data Provider and wrap an object around it. So Data Providers developed for react-admin v2 still work with react-admin v3.  
 
 ## Available Providers
 

docs/FAQ.md

@@ -172,7 +172,7 @@ But with the default menu, resources without `list` prop aren't shown.
 
 In order to have a specific resource without `list` prop listed on the menu, you have to [write your own custom menu](./Theming.md#using-a-custom-menu).
 
- ```jsx
+```jsx
  const MyMenu = ({ resources, onMenuClick, logout }) => (
     <div>
         {resources.map(resource => (
@@ -187,7 +187,7 @@ In order to have a specific resource without `list` prop listed on the menu, you
 
 React Admin users and third-party libraries maintainers might have noticed that the default UI template `ra-ui-materialui` [has `@material-ui/core@^1.4.0` as dependency](https://github.com/marmelab/react-admin/blob/ae45a2509b391a6ea81cdf9c248ff9d28364b6e1/packages/ra-ui-materialui/package.json#L44) even though the latest version of Material UI is already 3.x.
 
-We chose not to upgrade to Material UI v3 when it was released because the MUI team was already hard at work preparing the next major version ([which includes major breaking changes](https://github.com/mui-org/material-ui/issues/13663)). In fact, material-ui published a release schedule for one major version every 6 months. This means that developers using material-ui have to upgrade their codebase every six months to get the latest updates. On the other hand, react-admin plans to release a major version once every year, minimizing the upgrade work for developers. This gain in stability is a tradeoff - react-admin users can't use the latest version of material-ui for about half a year.
+We chose not to upgrade to Material UI v3 when it was released because the MUI team was already hard at work preparing the next major version ([which includes major breaking changes](https://github.com/mui-org/material-ui/issues/13663)). In fact, material-ui published a release schedule for one major version every 6 months. This means that developers using material-ui have to upgrade their codebase every six months to get the latest updates. On the other hand, react-admin plans to release a major version once every year, minimizing the upgrade work for developers. This gain in stability is a trade-off - react-admin users can't use the latest version of material-ui for about half a year.
 
 Feel free to discuss this policy in [issue #2399](https://github.com/marmelab/react-admin/issues/2399).
 

docs/Fields.md

@@ -29,9 +29,9 @@ All field components accept the following attributes:
 * `label`: Used as a table header of an input label. Defaults to the `source` when omitted.
 * `sortable`: Should the list be sortable using `source` attribute? Defaults to `true`.
 * `className`: A class name (usually generated by JSS) to customize the look and feel of the field element itself
-* `cellClassName`: A class name (usually generated by JSS) to customize the look and feel of the field container (e.g. the `<td>` in a datagrid).
-* `headerClassName`: A class name (usually generated by JSS) to customize the look and feel of the field header (e.g. the `<th>` in a datagrid).
-* `addLabel`: Defines the visibility of the label when the field is not in a datagrid. Default value is ```true```.
+* `cellClassName`: A class name (usually generated by JSS) to customize the look and feel of the field container (e.g. the `<td>` in a `Datagrid`).
+* `headerClassName`: A class name (usually generated by JSS) to customize the look and feel of the field header (e.g. the `<th>` in a `Datagrid`).
+* `addLabel`: Defines the visibility of the label when the field is not in a `Datagrid`. Default value is `true`.
 * `textAlign`: Defines the text alignment inside a cell. Supports `left` (the default) and `right`.
 
 {% raw %}
@@ -245,7 +245,7 @@ import { FunctionField } from 'react-admin'
 <FunctionField label="Name" render={record => `${record.first_name} ${record.last_name}`} />
 ```
 
-**Tip**: Technically, you can omit the `source` and `sortBy` properties for the `<FunctionField>` since you provide the render function. However, providing a `source` or a `sortBy` will allow the datagrid to make the column sortable, since when a user clicks on a column, the datagrid uses these properties to sort. Should you provide both, `sortBy` will override `source` for sorting the column.
+**Tip**: Technically, you can omit the `source` and `sortBy` properties for the `<FunctionField>` since you provide the render function. However, providing a `source` or a `sortBy` will allow the `Datagrid` to make the column sortable, since when a user clicks on a column, the datagrid uses these properties to sort. Should you provide both, `sortBy` will override `source` for sorting the column.
 
 ## `<ImageField>`
 
@@ -832,7 +832,7 @@ export const ProductList = (props) => (
 ```
 {% endraw %}
 
-You may want to override the field header (the `<th>` element in the datagrid). In that case, use the `headerClassName` prop:
+You may want to override the field header (the `<th>` element in the `Datagrid`). In that case, use the `headerClassName` prop:
 
 {% raw %}
 ```jsx

docs/List.md

@@ -731,7 +731,7 @@ const App = () => (
 );
 ```
 
-Just like `List`, `ListGuesser` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic datagrid with the data. It also dumps the components it has guessed in the console, where you can copy it into your own code. Use this feature to quickly bootstrap a `List` on top of an existing API, without adding the fields one by one.
+Just like `List`, `ListGuesser` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic `Datagrid` with the data. It also dumps the components it has guessed in the console, where you can copy it into your own code. Use this feature to quickly bootstrap a `List` on top of an existing API, without adding the fields one by one.
 
 ![Guessed List](./img/guessed-list.png)
 
@@ -741,7 +741,7 @@ React-admin provides guessers for the `List` view (`ListGuesser`), the `Edit` vi
 
 ## The `<Datagrid>` component
 
-The datagrid component renders a list of records as a table. It is usually used as a child of the [`<List>`](#the-list-component) and [`<ReferenceManyField>`](./Fields.md#referencemanyfield) components.
+The `Datagrid` component renders a list of records as a table. It is usually used as a child of the [`<List>`](#the-list-component) and [`<ReferenceManyField>`](./Fields.md#referencemanyfield) components.
 
 Here are all the props accepted by the component:
 
@@ -1020,7 +1020,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const PostList = props => {
-    const classes = usestyles();
+    const classes = useStyles();
     return (
         <List {...props}>
             <Datagrid>

docs/Readme.md

@@ -105,7 +105,7 @@ See the [Data Providers documentation](./DataProviders.md) for details.
 
 ## Batteries Included But Removable
 
-React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://material-ui.com/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.
+React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://material-ui.com/), in addition to controller functions implemented the Redux way. It is very easy to replace one part of react-admin with your own, e.g. to use a custom Datagrid, GraphQL instead of REST, or bootstrap instead of Material Design.
 
 ## Contributing
 

docs/Translation.md

@@ -41,7 +41,7 @@ const App = () => (
         // ...
 ```
 
-If you want to add or update tranlations, you'll have to provide your own `i18nProvider`.
+If you want to add or update translations, you'll have to provide your own `i18nProvider`.
 
 React-admin components use translation keys for their labels, and rely on the `i18nProvider` to translate them. For instance:
 

docs/Tutorial.md

@@ -111,13 +111,13 @@ The `list={ListGuesser}` prop means that react-admin should use the `<ListGuesse
 
 ![Users List](./img/tutorial_users_list.png)
 
-If you look at the network tab in the browser developer tools, you'll notice that the application fetched the `http://jsonplaceholder.typicode.com/users` URL, then used the results to build the datagrid. That's basically how react-admin works.
+If you look at the network tab in the browser developer tools, you'll notice that the application fetched the `http://jsonplaceholder.typicode.com/users` URL, then used the results to build the Datagrid. That's basically how react-admin works.
 
 The list is already functional: you can reorder it by clicking on column headers, or change pages by using the bottom pagination controls. The `ra-data-json-server` data provider translates these actions to a query string that JSONPlaceholder understands.
 
 ## Selecting Columns
 
-The `<ListGuesser>` component is not meant to be used in production - it's just a way to quicky bootstrap an admin. That means you'll have to replace the `ListGuesser` component in the `users` resource by a custom React component. Fortunately, `ListGuesser` dumps the code of the list it has guessed to the console:
+The `<ListGuesser>` component is not meant to be used in production - it's just a way to quickly bootstrap an admin. That means you'll have to replace the `ListGuesser` component in the `users` resource by a custom React component. Fortunately, `ListGuesser` dumps the code of the list it has guessed to the console:
 
 ![Guessed Users List](./img/tutorial_guessed_list.png)
 
@@ -164,9 +164,9 @@ const App = () => (
 
 There is no visible change in the browser - except now, the app uses a component that you can customize. 
 
-The main component of the users list is a `<List>` component, responsible for grabbing the information from the API, displaying the page title, and handling pagination. This list then delegates the display of the actual list of users to its child. In this case, that's a `<Datagrid>` component, which renders a table with one row for each record. The datagrid uses its child components (here, a list of `<TextField>` and `<EmailField>`) to determine the columns to render. Each Field component maps a different field in the API response, specified by the `source` prop.
+The main component of the users list is a `<List>` component, responsible for grabbing the information from the API, displaying the page title, and handling pagination. This list then delegates the display of the actual list of users to its child. In this case, that's a `<Datagrid>` component, which renders a table with one row for each record. The Datagrid uses its child components (here, a list of `<TextField>` and `<EmailField>`) to determine the columns to render. Each Field component maps a different field in the API response, specified by the `source` prop.
 
-The `ListGuesser` created one column for every field in the response. That's a bit too much of a usable grid, so let's remove a couple `<TextField>` from the datagrid and see the effect:
+The `ListGuesser` created one column for every field in the response. That's a bit too much of a usable grid, so let's remove a couple `<TextField>` from the Datagrid and see the effect:
 
 ```diff
 // in src/users.js
@@ -402,9 +402,9 @@ The post list now displays the user names on each line.
 
 **Tip**: The `<ReferenceField>` component alone doesn't display anything. It just fetches the reference data, and passes it as a `record` to its child component (a `<TextField>` in our case). Just like the `<List>` component, all `<Reference>` components are only responsible for fetching and preparing data, and delegate rendering to their children.
 
-**Tip**: Look at the network tab of your browser again: react-admin deduplicates requests for users, and aggregates them in order to make only *one* HTTP request to the `/users` endpoint for the whole datagrid. That's one of many optimizations that keep the UI fast and responsive.
+**Tip**: Look at the network tab of your browser again: react-admin deduplicates requests for users, and aggregates them in order to make only *one* HTTP request to the `/users` endpoint for the whole Datagrid. That's one of many optimizations that keep the UI fast and responsive.
 
-To finish the post list, place the post `id` field as first column, and remove the `body` field. From a UX point of view, fields containing large chunks of text should not appear in a datagrid, only in detail views. Also, to make the Edit action stand out, let's replace the `rowClick` action by an explicit action button:
+To finish the post list, place the post `id` field as first column, and remove the `body` field. From a UX point of view, fields containing large chunks of text should not appear in a Datagrid, only in detail views. Also, to make the Edit action stand out, let's replace the `rowClick` action by an explicit action button:
 
 ```diff
 // in src/posts.js