Skip to content

docs: add READMEs #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 27, 2024
Merged

docs: add READMEs #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Styra TypeScript packages

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

This repository contains Styra-supported Open Source TypeScript packages for use with the [Styra](https://styra.com) products, and [Open Policy Agent (OPA)](https://www.openpolicyagent.org/).


## [@styra/opa-react](https://www.npmjs.com/package/@styra/opa-react)

Utilities for using [@styra/opa](https://www.npmjs.com/package/@styra/opa) from React.


## Community

For questions, discussions and announcements related to Styra products, services and open-source projects, please join
the Styra community on [Slack](https://communityinviter.com/apps/styracommunity/signup)!
36 changes: 34 additions & 2 deletions packages/opa-react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,35 @@
# opa-react
# @styra/opa-react

<!-- TODO: add content -->
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
[![NPM Version](https://img.shields.io/npm/v/%40styra%2Fopa-react?style=flat&color=%2324b6e0)](https://www.npmjs.com/package/@styra/opa-react)

This package contains helpers for using [@styra/opa](https://www.npmjs.com/package/@styra/opa) from React.

The package provides an `useAuthz` hook and a high-level `<Authz>` component.

They are enabled by wrapping your App into `<AuthzProvider>`:

```tsx
<AuthzProvider sdk={sdk} path="policy" defaultInput={{ user, tenant }}>
<Nav />
<Outlet />
</AuthzProvider>
```

This example provides a previously-configured `sdk` instance (`OPAClient` from `@styra/opa`), a request path, and default input (which is merged with per-call inputs).

They can either be used with a function as child:
```tsx
<Authz path={path} input={input} loading={<div>loading</div>}>
{(result) => <button disabled={!result}>Press Here</button>}
</Authz>
```

Or by providing static children (`<button>Press Here</button>`) and optionally `fallback` JSX elements:
```tsx
<Authz path={path} input={input} fallback={<div>unauthorized</div>}>
<button>Press Here</button>
</Authz>
```

The `useAuthz` hook can be used if you need more low-level control about the authorization call.