fix(docs): add backticks to element names (#10874)

Co-authored-by: Matt Brophy <[email protected]>
Co-authored-by: remix-cla-bot[bot] <92060565+remix-cla-bot[bot]@users.noreply.github.com>
Co-authored-by: Ayushman Chhabra <[email protected]>

Author: 3 people

contributors.yml

@@ -25,6 +25,7 @@
 - avipatel97
 - awreese
 - aymanemadidi
+- ayushmanchhabra
 - babafemij-k
 - bavardage
 - bbrowning918
@@ -112,8 +113,8 @@
 - johnpangalos
 - jonkoops
 - jrakotoharisoa
-- kachun333
 - juanpprieto
+- kachun333
 - kantuni
 - kark
 - KAROTT7

packages/react-router-dom-v5-compat/lib/components.tsx

@@ -69,7 +69,7 @@ export interface StaticRouterProps {
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 
 /**
- * A <Router> that may not navigate to any other location. This is useful
+ * A `<Router>` that may not navigate to any other location. This is useful
  * on the server where there is no stateful UI.
  */
 export function StaticRouter({

packages/react-router-dom/index.tsx

@@ -512,7 +512,7 @@ const isBrowser =
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 
 /**
- * The public API for rendering a history-aware <a>.
+ * The public API for rendering a history-aware `<a>`.
  */
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function LinkWithRef(
@@ -623,7 +623,7 @@ export interface NavLinkProps
 }
 
 /**
- * A <Link> wrapper that knows if it's "active" or not.
+ * A `<Link>` wrapper that knows if it's "active" or not.
  */
 export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
   function NavLinkWithRef(

packages/react-router-dom/server.tsx

@@ -43,7 +43,7 @@ export interface StaticRouterProps {
 }
 
 /**
- * A <Router> that may not navigate to any other location. This is useful
+ * A `<Router>` that may not navigate to any other location. This is useful
  * on the server where there is no stateful UI.
  */
 export function StaticRouter({

packages/react-router-native/index.tsx

@@ -146,7 +146,7 @@ export {
 export interface NativeRouterProps extends MemoryRouterProps {}
 
 /**
- * A <Router> that runs on React Native.
+ * A `<Router>` that runs on React Native.
  */
 export function NativeRouter(props: NativeRouterProps) {
   return <MemoryRouter {...props} />;
@@ -162,7 +162,7 @@ export interface LinkProps extends TouchableHighlightProps {
 }
 
 /**
- * A <TouchableHighlight> that navigates to a different URL when touched.
+ * A `<TouchableHighlight>` that navigates to a different URL when touched.
  */
 export function Link({
   onPress,

packages/react-router/lib/components.tsx

@@ -184,7 +184,7 @@ export interface MemoryRouterProps {
 }
 
 /**
- * A <Router> that stores all entries in memory.
+ * A `<Router>` that stores all entries in memory.
  *
  * @see https://reactrouter.com/router-components/memory-router
  */
@@ -368,9 +368,9 @@ export interface RouterProps {
 /**
  * Provides location context for the rest of the app.
  *
- * Note: You usually won't render a <Router> directly. Instead, you'll render a
- * router that is more specific to your environment such as a <BrowserRouter>
- * in web browsers or a <StaticRouter> for server rendering.
+ * Note: You usually won't render a `<Router>` directly. Instead, you'll render a
+ * router that is more specific to your environment such as a `<BrowserRouter>`
+ * in web browsers or a `<StaticRouter>` for server rendering.
  *
  * @see https://reactrouter.com/router-components/router
  */
@@ -451,7 +451,7 @@ export interface RoutesProps {
 }
 
 /**
- * A container for a nested tree of <Route> elements that renders the branch
+ * A container for a nested tree of `<Route>` elements that renders the branch
  * that best matches the current location.
  *
  * @see https://reactrouter.com/components/routes
@@ -593,7 +593,7 @@ class AwaitErrorBoundary extends React.Component<
 
 /**
  * @private
- * Indirection to leverage useAsyncValue for a render-prop API on <Await>
+ * Indirection to leverage useAsyncValue for a render-prop API on `<Await>`
  */
 function ResolveAwait({
   children,

packages/react-router/lib/context.ts

@@ -100,7 +100,7 @@ export interface NavigateOptions {
  * A Navigator is a "location changer"; it's how you get to different locations.
  *
  * Every history instance conforms to the Navigator interface, but the
- * distinction is useful primarily when it comes to the low-level <Router> API
+ * distinction is useful primarily when it comes to the low-level `<Router>` API
  * where both the location and a navigator must be provided separately in order
  * to avoid "tearing" that may occur in a suspense-enabled app if the action
  * and/or location were to be read directly from the history instance.

packages/react-router/lib/hooks.tsx

@@ -82,7 +82,7 @@ export function useHref(
 }
 
 /**
- * Returns true if this component is a descendant of a <Router>.
+ * Returns true if this component is a descendant of a `<Router>`.
  *
  * @see https://reactrouter.com/hooks/use-in-router-context
  */
@@ -124,7 +124,7 @@ export function useNavigationType(): NavigationType {
 /**
  * Returns a PathMatch object if the given pattern matches the current URL.
  * This is useful for components that need to know "active" state, e.g.
- * <NavLink>.
+ * `<NavLink>`.
  *
  * @see https://reactrouter.com/hooks/use-match
  */
@@ -172,7 +172,7 @@ function useIsomorphicLayoutEffect(
 }
 
 /**
- * Returns an imperative method for changing the location. Used by <Link>s, but
+ * Returns an imperative method for changing the location. Used by `<Link>`s, but
  * may also be used by other elements to change the location.
  *
  * @see https://reactrouter.com/hooks/use-navigate
@@ -270,7 +270,7 @@ export function useOutletContext<Context = unknown>(): Context {
 
 /**
  * Returns the element for the child route at this level of the route
- * hierarchy. Used internally by <Outlet> to render child routes.
+ * hierarchy. Used internally by `<Outlet>` to render child routes.
  *
  * @see https://reactrouter.com/hooks/use-outlet
  */
@@ -331,7 +331,7 @@ export function useResolvedPath(
 /**
  * Returns the element of the route that matched the current location, prepared
  * with the correct context to render the remainder of the route tree. Route
- * elements in the tree must render an <Outlet> to render their child route's
+ * elements in the tree must render an `<Outlet>` to render their child route's
  * element.
  *
  * @see https://reactrouter.com/hooks/use-routes
@@ -903,15 +903,15 @@ export function useRouteError(): unknown {
 }
 
 /**
- * Returns the happy-path data from the nearest ancestor <Await /> value
+ * Returns the happy-path data from the nearest ancestor `<Await />` value
  */
 export function useAsyncValue(): unknown {
   let value = React.useContext(AwaitContext);
   return value?._data;
 }
 
 /**
- * Returns the error from the nearest ancestor <Await /> value
+ * Returns the error from the nearest ancestor `<Await />` value
  */
 export function useAsyncError(): unknown {
   let value = React.useContext(AwaitContext);

packages/router/utils.ts

@@ -68,8 +68,8 @@ type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
 type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
 
 /**
- * Users can specify either lowercase or uppercase form methods on <Form>,
- * useSubmit(), <fetcher.Form>, etc.
+ * Users can specify either lowercase or uppercase form methods on `<Form>`,
+ * useSubmit(), `<fetcher.Form>`, etc.
  */
 export type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod;