# limit-react-library

> Limit React Library

Latest version **0.2.0** (published 2021-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install limit-react-library
pnpm add limit-react-library
yarn add limit-react-library
bun add limit-react-library
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-12-02 |
| First published | 2021-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 6 |
| Unpacked size | 51.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | juanmzaragoza |
| Maintainers | juanmzaragoza |

## Links

- npm: https://www.npmjs.com/package/limit-react-library
- Repository: https://github.com/juanmzaragoza/limit-react-library
- Homepage: https://github.com/juanmzaragoza/limit-react-library#readme
- Issues: https://github.com/juanmzaragoza/limit-react-library/issues
- npm.io page: https://npm.io/package/limit-react-library

## Dependencies (6)

- [@mui/styles](https://npm.io/package/@mui/styles.md) ^5.2.2
- [keycloak-js](https://npm.io/package/keycloak-js.md) ^15.0.2
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.2.2
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.7.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.6.0
- [@react-keycloak/web](https://npm.io/package/@react-keycloak/web.md) ^3.4.0

## Recent versions

- 0.2.0 (latest) — 2021-12-02
- 0.1.0 — 2021-12-02

## README

# limit-react-components

> Limit React Components

[![NPM](https://img.shields.io/npm/v/limit-react-components.svg)](https://www.npmjs.com/package/limit-react-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save limit-react-components
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'limit-react-components'
import 'limit-react-components/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

### Keycloak Authentication
First, configure the redirect url to the site where it will be used.

After, create a `silent-check-sso.html` file inside the `/public` folder
```html
<html>
    <body>
        <script>parent.postMessage(location.href, location.origin)</script>
    </body>
</html>
```

Then, you have to import the `<KeycloakWrapper>` to access to hooks inside any authenticated component
```jsx
import React from "react";
import { keycloak } from 'limit-react-components';
...

const { Keycloak, KeycloakWrapper, KeycloakConfigurator } = keycloak;

const customKeycloak = new Keycloak({
  realm: "limit", // realm as configured in Keycloak
  url: "https://keycloak.limit.es/auth/", // URL of the Keycloak server
  clientId: "estudi-projectes", // client id as configured in the realm in Keycloak
});

const Authentication = () => {
  return <KeycloakWrapper customKeycloak={customKeycloak}>
    <KeycloakConfigurator />
    {/* your authenticated components */}
  </KeycloakWrapper>;
};
```

Use the hooks inside any component:
```jsx
import React from "react";
...

import { keycloak } from 'limit-react-components';

...

const { useKeycloak } = keycloak;

const AuthenticatedComponent = () => {
  const { isAuthenticated, logout, getToken, updateToken } = useKeycloak();
  ...
  const handleLogout = () => {
    logout();
  };

  return <Grid container spacing={2}>
    <Grid item xs={3}>
      <div>You are {isAuthenticated? "":"not"} authenticated!</div>
        {isAuthenticated && <Button variant="contained" onClick={handleLogout}>Logout</Button>}
    </Grid>
    <Grid item xs={9}>
      <TextWrapper>{`Token: ${getToken()}`}</TextWrapper>
      <Typography component={"p"}>{`Updated token: ${updatedToken?? "-"}`}</Typography>
    </Grid>
    ...
  </Grid>
};

export default AuthenticatedComponent;
```

If you need use it inside an isolated function, you should add `<KeycloakConfigurator />` (see the first example) and use `KeycloakUtils` library of this way:
```jsx
import { keycloak } from 'limit-react-components';

const { keycloakFunction: KeycloakUtils } = keycloak;

export const refreshToken = async () => {
  await KeycloakUtils.refresh();
};
```

## License

MIT © [juanmzaragoza](https://github.com/juanmzaragoza)

---
_Source: https://npm.io/package/limit-react-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._