@selfcommunity/react-core
Version:
React Core Components useful for integrating UI Community components (react-ui).
58 lines (51 loc) • 2.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const SCRoutingProvider_1 = require("../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 = tslib_1.__rest(_a, ["children"]);
const scRoutingContext = (0, react_1.useContext)(SCRoutingProvider_1.SCRoutingContext);
if (scRoutingContext.routerLink) {
const ComponentLink = scRoutingContext.routerLink;
return ((0, jsx_runtime_1.jsx)(ComponentLink, Object.assign({}, other, { ref: ref }, { children: children })));
}
const { to } = other, rest = tslib_1.__rest(other, ["to"]);
return ((0, jsx_runtime_1.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>
````
:::
*/
exports.default = react_1.default.forwardRef(Link);