@selfcommunity/react-core
Version:
React Core Components useful for integrating UI Community components (react-ui).
56 lines (49 loc) • 1.92 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import React, { useContext } from 'react';
import { SCRoutingContext } from '../provider/SCRoutingProvider';
/**
*
* Import these components:
* import {SCRoutingContextType, useSCRouting, Link, SCRoutes} from '@selfcommunity/react-core';
*
* Example:
* const scRoutingContext: SCRoutingContextType = useSCRouting();
* `<Button component={Link} to={scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, {id: user.id})}>Go to profile</Button>`
* or
* const scRoutingContext: SCRoutingContextType = useSCRouting();
* `<Link to={scRoutingContext.url('profile', {id: user.id})}>Go to profile</Link>`
*
*/
const Link = (_a, ref) => {
var { children } = _a, other = __rest(_a, ["children"]);
const scRoutingContext = useContext(SCRoutingContext);
if (scRoutingContext.routerLink) {
const ComponentLink = scRoutingContext.routerLink;
return (_jsx(ComponentLink, Object.assign({}, other, { ref: ref }, { children: children })));
}
const { to } = other, rest = __rest(other, ["to"]);
return (_jsx("a", Object.assign({ href: to }, rest, { ref: ref }, { children: children })));
};
/**
:::info
This component is used to navigate through the application.
:::
## Usage
In order to use router you need to import this components first:
```jsx
import {SCRoutingContextType, useSCRouting, Link, SCRoutes} from '@selfcommunity/react-core';
````
:::tip Usage Example:
```jsx
const scRoutingContext: SCRoutingContextType = useSCRouting();
<Button component={Link} to={scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, {id: user.id})>Go to profile</Button>
````
**or**
```jsx
const scRoutingContext: SCRoutingContextType = useSCRouting();
<Link to={scRoutingContext.url('profile', {id: user.id})}>Go to profile</Link>
````
:::
*/
export default React.forwardRef(Link);