Fix typos anchors, and code samples

.github/CONTRIBUTING.md

@@ -4,7 +4,7 @@ So you want to contribute to react-admin? Awesome! Thank you in advance for your
 
 ## Asking Questions
 
-For how-to questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/react-admin) instead of Github issues. There is a StackOverflow tag called "react-admin" that you can use to tag your questions.
+For how-to questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/react-admin) instead of GitHub issues. There is a StackOverflow tag called "react-admin" that you can use to tag your questions.
 
 ## Opening an Issue
 

UPGRADE.md

@@ -58,7 +58,7 @@ Note that `<CustomRoutes>` handles `null` elements and fragments correctly, so y
 
 In order to define the resources and their views according to users permissions, we used to support a function as a child of `<Admin>`. Just like the `customRoutes`, this function had to return an array of elements.
 
-You can now return a fragment and this fragment may contains `null` elements. Besides, if you don't need to check the permissions for a resource, you may even include it as a direct child of `<Admin>`.
+You can now return a fragment and this fragment may contain `null` elements. Besides, if you don't need to check the permissions for a resource, you may even include it as a direct child of `<Admin>`.
 
 ```diff
 <Admin>
@@ -811,7 +811,7 @@ const App = () => {
 
 ## Custom Menus Should Get Resource Definition From Context
 
-React-admin used to store the definitino of each resource (its name, icon, label, etc.) in the Redux state. This is no longer the case, as the resource definition is now stored in a custom  context.
+React-admin used to store the definition of each resource (its name, icon, label, etc.) in the Redux state. This is no longer the case, as the resource definition is now stored in a custom context.
 
 If you relied on the `useResourceDefinition` hook, this change shouldn't affect you.
 
@@ -1233,7 +1233,7 @@ const MyCustomField = () => (
 
 ## Removed `loading` and `loaded` Data Provider State Variables
 
-The dataProvider hooks (`useGetOne`, etc) return the request state. The `loading` and `loaded` state variables were changed to `isLoading` and `isFetching` respectively. The meaning has changed, too:
+The dataProvider hooks (`useGetOne`, etc.) return the request state. The `loading` and `loaded` state variables were changed to `isLoading` and `isFetching` respectively. The meaning has changed, too:
 
 - `loading` is now `isFetching`
 - `loaded` is now `!isLoading`

docs/Actions.md

@@ -905,7 +905,7 @@ redirect('edit', '/posts', 1);
 redirect('create', '/posts');
 // redirect to the result of a function
 redirect((redirectTo, basePath, id, data) => { 
-    return  data.hasComments ? '/comments' : '/posts';
+    return data.hasComments ? '/comments' : '/posts';
 }, '/posts', 1, { hasComments: true });
 // redirect to edit view with state data
 redirect('edit', '/posts', 1, {}, { record: { post_id: record.id } });

docs/Admin.md

@@ -666,7 +666,7 @@ const App = () => (
 export default App;
 ```
 
-When a user browses to `/register`, the `<Register>` component will appear outside of the defined Layout, leaving you the freedom to design the screen the way you want.
+When a user browses to `/register`, the `<Register>` component will appear outside the defined Layout, leaving you the freedom to design the screen the way you want.
 
 **Tip**: Custom routes can be [a `<Redirect>` route](https://reacttraining.com/react-router/web/api/Redirect), too.
 

docs/Architecture.md

@@ -267,7 +267,7 @@ You can build your own distribution of react-admin by combining different packag
 
 None of us like to update the code of our apps just because an underlying library has published a breaking change. React-admin does its best to avoid losing developers' time.
 
-Some of the components may have a weird API. That's probably for historical reasons. We prefer to keep the backward compatibility as high as possible - sometimes at the cost of API consistency.
+Some components may have a weird API. That's probably for historical reasons. We prefer to keep the backward compatibility as high as possible - sometimes at the cost of API consistency.
 
 The code of some components may seem convoluted for no apparent reason. It's probably that the component has to support both the old and the new syntax.
 

docs/Authentication.md

@@ -56,7 +56,7 @@ It's very common that your auth logic is so specific that you'll need to write y
 
 - **[AWS Amplify](https://docs.amplify.aws)**: [MrHertal/react-admin-amplify](https://github.com/MrHertal/react-admin-amplify)
 - **[AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/setting-up-the-javascript-sdk.html)**: [thedistance/ra-cognito](https://github.com/thedistance/ra-cognito)
-- **[Firebase Auth (Google, Facebook, Github etc)](https://firebase.google.com/docs/auth/web/firebaseui)**: [benwinding/react-admin-firebase](https://github.com/benwinding/react-admin-firebase#auth-provider)
+- **[Firebase Auth (Google, Facebook, GitHub, etc.)](https://firebase.google.com/docs/auth/web/firebaseui)**: [benwinding/react-admin-firebase](https://github.com/benwinding/react-admin-firebase#auth-provider)
 - **[Supabase](https://supabase.io/)**: [marmelab/ra-supabase](https://github.com/marmelab/ra-supabase).
 
 Beyond ready-to-use providers, you may find help in these third-party tutorials about integrating more authentication backends:

docs/CreateEdit.md

@@ -1225,7 +1225,7 @@ export const UserCreate = () => (
 );
 ```
 
-**Tip**: The props you pass to `<SimpleForm>` and `<TabbedForm>` are passed to the [<Form>](https://final-form.org/docs/react-final-form/api/Form) of `react-final-form`.
+**Tip**: The props you pass to `<SimpleForm>` and `<TabbedForm>` are passed to the [\<Form\>](https://final-form.org/docs/react-final-form/api/Form) of `react-final-form`.
 
 **Tip**: The `validate` function can return a promise for asynchronous validation. See [the Server-Side Validation section](#server-side-validation) below.
 

docs/Ecosystem.md

@@ -55,7 +55,7 @@ See the [Data Provider](./DataProviders.md#available-providers) page.
 
 ## Miscellaneous
 
-- [@react-admin/ra-preferences](https://marmelab.com/ra-enterprise/modules/ra-preferences) <img class="icon" src="./img/premium.svg" />: a [ra-enterprise](https://marmelab.com/ra-enterprise) module which persists user preferences (language, theme, filters, datagrid columns, sidebar position, etc) in local storage.
+- [@react-admin/ra-preferences](https://marmelab.com/ra-enterprise/modules/ra-preferences) <img class="icon" src="./img/premium.svg" />: a [ra-enterprise](https://marmelab.com/ra-enterprise) module which persists user preferences (language, theme, filters, datagrid columns, sidebar position, etc.) in local storage.
 - [@react-admin/ra-navigation](https://marmelab.com/ra-enterprise/modules/ra-navigation) <img class="icon" src="./img/premium.svg" />: a [ra-enterprise](https://marmelab.com/ra-enterprise) module which offers specialized UI components (`<Breadcrumb>`, `<MultiLevelMenu>`) and hooks (`useDefineAppLocation`, `useAppLocationstate`) to organize pages in a tree structure, and provide navigation widgets () to help users find their way in that structure.
 - [@react-admin/ra-realtime](https://marmelab.com/ra-enterprise/modules/ra-realtime) <img class="icon" src="./img/premium.svg" />: a [ra-enterprise](https://marmelab.com/ra-enterprise) module which provides hooks and UI components to lock records, live update views when a change occurs in the background, and notify the user of these events.
 - [@react-admin/ra-tour](https://marmelab.com/ra-enterprise/modules/ra-tour) <img class="icon" src="./img/premium.svg" />: a [ra-enterprise](https://marmelab.com/ra-enterprise) module which provides a way to guide users through tutorials to showcase and explain important features of your interfaces.

docs/Fields.md

@@ -38,7 +38,7 @@ const PurpleTextField = ({ source }) => {
 ```
 {% endraw %}
 
-React-admin Field components also accept a `record` prop. This allows you to use them outside of a `RecordContext`, or to use another `record` than the one in the current context.
+React-admin Field components also accept a `record` prop. This allows you to use them outside a `RecordContext`, or to use another `record` than the one in the current context.
 
 ```jsx
 // a post looks like
@@ -310,7 +310,7 @@ import { ImageField } from 'react-admin';
 </div>
 ```
 
-This field is also often used within the [<ImageInput />](./Inputs.md#imageinput) component to display a preview.
+This field is also often used within the [`<ImageInput />`](./Inputs.md#imageinput) component to display a preview.
 
 #### Properties
 
@@ -373,7 +373,7 @@ import { FileField } from 'react-admin';
 </div>
 ```
 
-This field is also often used within an [<FileInput />](./Inputs.md#fileinput) component to display preview.
+This field is also often used within a [\<FileInput /\>](./Inputs.md#fileinput) component to display preview.
 
 #### Properties
 

docs/FilteringTutorial.md

@@ -25,7 +25,7 @@ React-admin proposes several UI components to let users see and modify filters,
 
 - The Filter Button/Form Combo
   - [Usage](#the-filter-buttonform-combo)
-  - [Full-Text Search](#search-input)
+  - [Full-Text Search](#searchinput)
   - [Quick Filters](#quick-filters)
 - [The `<FilterList>` Sidebar](#the-filterlist-sidebar)
 - [Saved Queries: Let Users Save Filter And Sort](#saved-queries-let-users-save-filter-and-sort)

docs/Readme.md

@@ -134,13 +134,13 @@ Read more about the [Architecture choices](./Architecture.md).
 The [React-Admin Enterprise Edition](https://marmelab.com/ra-enterprise) <img class="icon" src="./img/premium.svg" /> offers additional features and services for react-admin:
 
 - Save weeks of development thanks to the **Private Modules**, valid on an unlimited number of domains and projects.
-  - `ra-preferences`: Persist user preferences (language, theme, filters, datagrid columns, sidebar position, etc) in local storage.
+  - `ra-preferences`: Persist user preferences (language, theme, filters, datagrid columns, sidebar position, etc.) in local storage.
   - `ra-navigation`: Multi-level menu and breadcrumb, with the ability to define a custom path for your resources.
   - `ra-realtime`: Display live notifications, auto-update content on the screen, lock content when editing, with adapters for real-time backends.
   - `ra-editable-datagrid`: Edit data directly in the list view, for better productivity. Excel-like editing experience.
   - `ra-form-layout`: New form layouts for complex data entry tasks (accordion, wizard, etc.)
   - `ra-relationships`: Visualize and edit complex relationships, including many-to-many relationships.
-  - `ra-tree`: Edit and visualize tree structures. Reorganize by drag and drop. Adapts to any data structure on the backend (parent_id, children, nested sets, etc).
+  - `ra-tree`: Edit and visualize tree structures. Reorganize by drag and drop. Adapts to any data structure on the backend (parent_id, children, nested sets, etc.).
   - `ra-tour`: Guided tours for react-admin applications. Step-by-step instructions, Material-ui skin.
   - `ra-markdown`: Read Markdown data, and edit it using a WYSIWYG editor in your admin
 - Get **Support** from experienced react and react-admin developers, who will help you find the right information and troubleshoot your bugs.

docs/Show.md

@@ -92,7 +92,7 @@ export const PostShow = () => (
 );
 ```
 
-You can also pass a React element as child, so as to build a custom layout. Check [Building a custom Show Layout](./ShowTutorial.md#building-a-custom-layout) for more details.
+You can also pass a React element as child, to build a custom layout. Check [Building a custom Show Layout](./ShowTutorial.md#building-a-custom-layout) for more details.
 
 ## Page Title
 

docs/SimpleShowLayout.md

@@ -178,7 +178,7 @@ const BookShow = () => (
 
 ## Controlled Mode
 
-By default, `<SimpleShowLayout>` reads the record from the `ResourceContext`. But by passing a `record` prop, you can render the component outside of a `ResourceContext`.
+By default, `<SimpleShowLayout>` reads the record from the `ResourceContext`. But by passing a `record` prop, you can render the component outside a `ResourceContext`.
 
 {% raw %}
 ```jsx

docs/TabbedShowLayout.md

@@ -253,7 +253,7 @@ export default ScrollableTabbedShowLayout;
 
 ## Controlled Mode
 
-By default, `<TabbedShowLayout>` reads the record from the `ResourceContext`. But by passing a `record` prop, you can render the component outside of a `ResourceContext`.
+By default, `<TabbedShowLayout>` reads the record from the `ResourceContext`. But by passing a `record` prop, you can render the component outside a `ResourceContext`.
 
 {% raw %}
 ```jsx

docs/Theming.md

@@ -768,7 +768,7 @@ export default MyAppBar;
 
 Take note that this uses *material-ui's `<AppBar>`* instead of *react-admin's `<AppBar>`*. To use this custom `AppBar` component, pass it as prop to a custom `Layout`, as explained in the previous section.
 
-To make it easier to customize, we export some of the components and hooks used by the `<AppBar>`:
+To make it easier to customize, we export some components and hooks used by the `<AppBar>`:
 
 - `<LoadingIndicator>`: A `CircularProgress` bound to the dataProvider activity.
 - `<SidebarToggleButton>`: An `IconButton` used to toggle the `<Sidebar>`.

docs/useListContext.md

@@ -97,10 +97,10 @@ You can find many usage examples of `useListContext` in the documentation, inclu
 
 - [Adding a Side Component with `<List actions>`](./List.md#aside-side-component)
 - [Building a Custom Actions Bar via `<List actions>`](./List.md#actions)
-- [Building a Custom Empty Page  via `<List empty>`](./List.md#empty-empty-page-component)
+- [Building a Custom Empty Page via `<List empty>`](./List.md#empty-empty-page-component)
 - [Building a Custom Filter](./FilteringTutorial.md#building-a-custom-filter)
 - [Building a Custom Sort Control](./ListTutorial.md#building-a-custom-sort-control)
 - [Building a Custom Pagination Control](./ListTutorial.md#building-a-custom-pagination)
 - [Building a Custom Iterator](./ListTutorial.md#building-a-custom-iterator)
 
-**Tip**: [`<ReferenceManyField>`](./Fields.md#referencemanyfield), as well as other relationship-related components, also implement a `ListContext`. That means you can use a `<Datagrid>` of a `<Pagination>` inside these components!
+**Tip**: [`<ReferenceManyField>`](./Fields.md#referencemanyfield), as well as other relationship-related components, also implement a `ListContext`. That means you can use a `<Datagrid>` of a `<Pagination>` inside these components!

docs/useListController.md

@@ -34,15 +34,15 @@ const MyList = () => {
 `useListController` expects one object as parameter. All keys are optional.
 
 * [`debounce`](./List.md#debounce): debounce time in ms for the setFilters callbacks
-* [`disableAuthentication`](./List.md#disableAuthentication): set to true to allow anonymous access to the list
-* [`disableSyncWithLocation`](./List.md#disableSyncWithLocation): set to true to have more than one list per page
+* [`disableAuthentication`](./List.md#disableauthentication): set to true to allow anonymous access to the list
+* [`disableSyncWithLocation`](./List.md#disablesyncwithlocation): set to true to have more than one list per page
 * [`exporter`](./List.md#exporter): exporter function
 * [`filter`](./List.md#filter-permanent-filter): permanent filter, forced over the user filter
-* [`filterDefaultValues`](./List.md#filterDefaultValues): default values for the filter form
+* [`filterDefaultValues`](./List.md#filterdefaultvalues): default values for the filter form
 * [`perPage`](./List.md#perpage-pagination-size): number of results per page
-* [`queryOptions`](./List.md#queryOptions): react-query options for the useQuery call
+* [`queryOptions`](./List.md#queryoptions): react-query options for the useQuery call
 * [`resource`](./List.md#resource): resource name, e.g. 'posts' ; defaults to the current resource context
-* [`sort`](./List.md#sort-default-sort-field-order), current sort value, e.g. { field: 'published_at', order: 'DESC' }
+* [`sort`](./List.md#sort-default-sort-field--order), current sort value, e.g. { field: 'published_at', order: 'DESC' }
 
 Here are their default values:
 
@@ -53,17 +53,29 @@ import {
     ListContextProvider
 } from 'react-admin';
 
-const MyList = () => {
+const MyList = ({
+    debounce = 500,
+    disableAuthentication = false,
+    disableSyncWithLocation = false,
+    exporter = defaultExporter,
+    filter = undefined,
+    filterDefaultValues = undefined,
+    perPage = 10,
+    queryOptions = undefined,
+    resource = '',
+    sort = { field: 'id', order: 'DESC' },
+}) => {
     const listContext = useListController({
-        debounce = 500,
-        disableAuthentication = false,
-        disableSyncWithLocation = false,
-        exporter = defaultExporter,
-        filter = undefined,
-        filterDefaultValues = undefined,        perPage = 10,
-        queryOptions = undefined,
-        resource = '',
-        sort = { field: 'id', order: 'DESC' },.
+        debounce,
+        disableAuthentication,
+        disableSyncWithLocation,
+        exporter,
+        filter,
+        filterDefaultValues,
+        perPage,
+        queryOptions,
+        resource,
+        sort,
     });
     return (
         <ListContextProvider value={listContext}>
@@ -77,7 +89,7 @@ const MyList = () => {
 
 The return value of `useListController` has the following shape:
 
-```jsx
+```js
 const {
     // fetched data
     data, // an array of the list records, e.g. [{ id: 123, title: 'hello world' }, { ... }]

docs/useShowController.md

@@ -122,7 +122,7 @@ The default `onError` function is:
 
 By default, `useShowController` reads the resource name from the resource context, and the record id from the browser location.
 
-But by passing `resource` and `id` props, you can run the controller logic outside of these contexts:
+But by passing `resource` and `id` props, you can run the controller logic outside these contexts:
 
 ```jsx
 import { useShowController } from 'react-admin';

examples/README.md

@@ -4,6 +4,6 @@
 
 If you'd like to contribute example applications, you'll likely use [create-react-app](https://github.com/facebookincubator/create-react-app). Unfortunately, you won't be able to initialize your example by running `create-react-app myexample` directly in this directory. This is because `create-react-app` does not work yet with yarn workspaces and lerna. There is a workaround though:
 
-Initialize your new example application outside of react-admin folder then simply move the newly created folder inside the `examples` folder. Finally, run `yarn` at the react-admin root folder.
+Initialize your new example application outside react-admin folder then simply move the newly created folder inside the `examples` folder. Finally, run `yarn` at the react-admin root folder.
 
 **Tip:** Ensure you don't commit a `yarn.lock` inside your new example application folder.

examples/crm/src/dataGenerator/finalize.ts

@@ -1,7 +1,7 @@
 import { Db } from './types';
 
 export const finalize = (db: Db) => {
-    // set contact status according to latest note
+    // set contact status according to the latest note
     db.contactNotes
         .sort((a, b) => new Date(a.date).valueOf() - new Date(b.date).valueOf())
         .forEach(note => {

examples/simple/README.md

@@ -1,6 +1,6 @@
 # React-admin Simple Example
 
-This is the application we use for our end to end tests, and for reproducing bugs via CodeSandbox.
+This is the application we use for our end-to-end tests, and for reproducing bugs via CodeSandbox.
 
 ## How to run
 

packages/ra-core/src/core/useResourceDefinition.ts

@@ -22,7 +22,7 @@ import { ResourceDefinition } from '../types';
  * //   icon: PostIcon,
  * // }
  *
- * @example // Pass a resource prop to check a different ressource definition
+ * @example // Pass a resource prop to check a different resource definition
  *
  * const definition = useResourceDefinition({ resource: 'posts' });
  */

packages/ra-ui-materialui/src/layout/AppBar.tsx

@@ -22,7 +22,7 @@ import { HideOnScroll } from './HideOnScroll';
  * The AppBar component renders a custom MuiAppBar.
  *
  * @param {Object} props
- * @param {ReactNode} props.children React node/s to be render as children of the AppBar
+ * @param {ReactNode} props.children React node/s to be rendered as children of the AppBar
  * @param {Object} props.classes CSS class names
  * @param {string} props.className CSS class applied to the MuiAppBar component
  * @param {string} props.color The color of the AppBar