@curi/react-dom package provides a number of React components that you can use for rendering your application.
For more information on using Curi with React DOM, please check out the React DOM guide.
UMD scripts script are also available through Unpkg. You can access the package's exports using
A higher-order component that returns a
A Curi router.
A component that sets routing context data. Any component that relies on routing data must be a descendant of the
Router takes any valid React node (elements, strings, etc.) as its
Link is use for in-app navigation. By default, the component renders an anchor element (
<a>). When the rendered element is clicked, instead of reloading the page it will use the router to navigate.
Link, instead of providing a URI to navigate to, you specify the name of the route that you want to link to. The pathname of the URI you want the component to link to will be automatically generated for you.
The name of the route that the
Link should navigate to when it is clicked.
To navigate within the same location, the
name can be skipped. This is useful for linking to hashes within the current page.
If the named route (or any of its parents) include path parameters, they must be provided using the
state values for the location to navigate to.
A valid React Node (e.g. a React element, a string, or
Link renders an anchor element by default, but this can be changed using the
anchor prop. This can be useful for using styled components.
Any additional props attached to the
Link will be attached to the element rendered by the
AsyncLink is similar to a
Link, but uses a render-invoked function as its
See Link name
See Link params
children function that is called with the
AsyncLink's navigation state. The navigation state is
false to start,
true when the
AsyncLink is clicked, and
false when the the navigation finishes/is cancelled.
See Link anchor
See Link rest
useResponse hook reads the current
navigation values from React's context. This will be called every time a new response is emitted.
useRouter hook returns the
useActive hook determines if a route is active by comparing a route name (and possibly params) to a
useActive takes a single argument, an options object.
The name of the route to compare against the response object.
An object containing route parameters. These will be compared against the route params of the response object.
Allows ancestor routes to be considered active when true. Defaults to false.
The base active check only checks that the route (i.e. pathname) is active.
components allows you to check if other components of the location are also active.
useConfirm hook adds and removes a navigation confirmation.
When passed a function, the function will be called when the user navigates and give them the option to confirm or prevent the navigation.
When called with no argument, the existing navigation confirmation will be removed.
useNavigationFocus hook is used to focus a DOM element after a navigation.
The focused element will have an outline (the exact style varies by browser). You can remove this with CSS by setting
"none". This should only be done for non-focusable elements. Setting
"none" globally is bad for accessibility.
The default behavior for focusing an element is to scroll to it. If you want to prevent this, set
The default focus behavior is to always focus the element that the ref is attached to. However, if you want to preserve the focus on some other element (e.g. an autofocused element), setting the
preserve option to
true will stop the
ref element from claiming the focus.
This only works when the already-focused element is a child of the
ref element. If it is not a child, then the
ref element will take the focus.
useNavigating hook is used to determine if the application is currently navigating. It pairs up with
router.cancel to enable cancelling asynchronous navigation.
This is only useful for asynchronous routes because with synchronous routes, navigation happens immediately.
useURL hook creates a URL string.
The name of the route to generate the location's pathname from. If this is not provided, the generated location's pathname will be an empty string (
An object of params for the named route.
A hash string for the location.
The location's query value.
By default, this is expected to be a string, but if you configure your history object with the
query option, this may be something else.
A context consumer component for injecting response values into components. Its primary use case is in class components.
A render-invoked function that returns a React element. This function will receive an object with
A context consumer component for injecting the router into components. Its primary use case is in class components.
A render-invoked function that returns a React element. This function will receive the application's