# hyperprops

> Connect the web of linked data to presentational react components.

Latest version **0.4.3** (published 2019-05-28) · 0 weekly downloads

## Install

```sh
npm install hyperprops
pnpm add hyperprops
yarn add hyperprops
bun add hyperprops
```

## 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.4.3 |
| Published | 2019-05-28 |
| First published | 2019-04-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aveltens |

## Links

- npm: https://www.npmjs.com/package/hyperprops
- Repository: https://gitlab.com/angelo-v/hyperprops
- Homepage: https://gitlab.com/angelo-v/hyperprops#readme
- Issues: https://gitlab.com/angelo-v/hyperprops/issues
- npm.io page: https://npm.io/package/hyperprops

## Dependencies (4)

- [jsonld](https://npm.io/package/jsonld.md) ^1.6.2
- [hyperfact](https://npm.io/package/hyperfact.md) 0.1.0-alpha.7
- [hyperfetch](https://npm.io/package/hyperfetch.md) 0.2.2
- [react-json-view](https://npm.io/package/react-json-view.md) ^1.19.1

## Recent versions

- 0.4.3 (latest) — 2019-05-28
- 0.4.2 — 2019-05-08
- 0.4.1 — 2019-05-08
- 0.4.0 — 2019-05-08
- 0.3.2 — 2019-04-30
- 0.3.1 — 2019-04-30
- 0.3.0 — 2019-04-30
- 0.2.2 — 2019-04-29
- 0.2.1 — 2019-04-29
- 0.2.0 — 2019-04-29
- 0.1.0 — 2019-04-25

## README

# Hyperprops

Connect the web of linked data to presentational react components.

```javascript

import {provide} from "hyperprops";

const resource = provide(
    // provide a base context, used by all components
    // this is good to declare common prefixes or often used properties
    {
      'foaf': 'http://xmlns.com/foaf/0.1/'
    }
);

// pure presentational component...
const Link = ({href, label}) => <a href={href}>{label}</a>;

// ... coming to live with hyperfact
const PersonLink = resource(
    Link,
    // specify which props need to be passed to the presentational component
    ["href", "label"],
    // specify which props should be passed, but are optional
    [],
    {
      // provide a specific context to map JSON-LD properties to component specific props
      href: "@id",
      label: "foaf:name",
    }
);


```

Usage:

```JSX
<PersonLink id="https://angelo.veltens.org/profile/card#me"/>
```

## Debug mode

```javascript
const PersonLink = resource(
    Link,
    ["href", "label"], [],
    {
      href: "@id",
      label: "foaf:name",
    },
    { debug: true }
);
```

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