# @valencyhq/react

> Valency is a tool to manage and serve design assets

Latest version **0.0.18** (published 2021-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @valencyhq/react
pnpm add @valencyhq/react
yarn add @valencyhq/react
bun add @valencyhq/react
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.18 |
| Published | 2021-05-16 |
| First published | 2021-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 111.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Victor Aremu |
| Maintainers | ahkohd |
| Keywords | javascript, react, typescript |

## Links

- npm: https://www.npmjs.com/package/@valencyhq/react
- Repository: https://github.com/ValencyHQ/react
- Homepage: github:ValencyHQ/react
- Issues: github:ValencyHQ/react/issues
- npm.io page: https://npm.io/package/@valencyhq/react

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.7.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.18 (latest) — 2021-05-16
- 0.0.17 — 2021-05-16
- 0.0.16 — 2021-05-16
- 0.0.15 — 2021-05-16
- 0.0.14 — 2021-05-16
- 0.0.13 — 2021-05-12
- 0.0.12 — 2021-05-11
- 0.0.11 — 2021-05-11
- 0.0.9 — 2021-05-11
- 0.0.8 — 2021-05-11
- 0.0.7 — 2021-05-11
- 0.0.6 — 2021-05-11
- 0.0.5 — 2021-05-10
- 0.0.4 — 2021-05-10
- 0.0.3 — 2021-05-10
- … 2 more at https://npm.io/package/@valencyhq/react/versions

## README

# React-valency

[![npm version][npmv-image]][npmv-url]
[![.github/workflows/publish.yml](https://github.com/ValencyHQ/react/actions/workflows/publish.yml/badge.svg)](https://github.com/ValencyHQ/react/actions/workflows/publish.yml)
[![coverage status][codecov-image]][codecov-url]
[![npm downloads][npmd-image]][npmd-url]

# 🤔 What is Valency?

Valency is a tool to manage and serve design assets.

- Design assets managed with Valency are served for use over a CDN.

## 📦 Install

```bash
$ npm install @valencyhq/valency @valencyhq/react --save
```

## Table of Contents

- [Basic Usage](#basic-usage)

     - [Component Usage](#components-usage)

- [Live Examples](#live-examples)
- [API Reference](#api-reference)
     - [Components](#components)
     - [ValencyProvider](#valencyprovider)
     - [Hooks](#hooks)
          - [useValency()](#usevalency)
- [Contributing](#contributing)
- [License](#license)

## <span id="basic-usage">🪄 Basic Usage</span>

### <span id="components-usage">1. 🧱 Components Usage</span>

```jsx
import React, { useEffect } from 'react'
import { render } from 'react-dom'
import Valency from '@valencyhq/valency'
import { ValencyProvider, Image, Object, Icon } from '@valencyhq/react'

const valent = new Valency({
      uid: 'Your user ID',
      project: 'Your default project ID',
      library: 'Your default library ID',
})

const App = () => {
      return (
            <ValencyProvider value={valent}>
                  {/* Your other components wrapped */}
                  <ExampleBasicUsage />
            </ValencyProvider>
      )
}

const ExampleBasicUsage = () => {
      return (
            <>
                  <Image name="cat-dog" />
                  <Object name="cat-dog" />
                  <Icon library="Lib_icons" name="like" />
            </>
      )
}

render(<App />, document.getElementById('root'))
```

### <span id="hooks-usage">2. 🪝 Hooks Usage</span>

```jsx
import React, { useEffect } from 'react'
import { render } from 'react-dom'
import Valency from '@valencyhq/valency'
import { ValencyProvider, Image, Object, Icon } from '@valencyhq/react'

const valent = new Valency({
      uid: 'Your user ID',
      project: 'Your default project ID',
      library: 'Your default library ID',
})

const App = () => {
      return (
            <ValencyProvider value={valent}>
                  {/* Your other components wrapped */}
                  <ExampleHooksUsage />
            </ValencyProvider>
      )
}

const ExampleHooksUsage = () => {
      const { get, asset, getConfig, setConfig } = useValency()

      useEffect(() => {
            console.log('Print cat-dig asset URL', get('cat-dog'))
      })

      return (
            <>
                  <button
                        type="button"
                        onClick={() => {
                              window.open(asset['cat-dog'].url, '_blank')
                        }}
                  >
                        View Asset
                  </button>
            </>
      )
}

render(<App />, document.getElementById('root'))
```

## <span id="live-examples">▶️ Live Examples</span>

- [Basic Usage](https://codesandbox.io/s/react-valency-uqrdi?file=/src/App.js)

## <span id="api-reference">📖 API Reference</span>

### Components

Valency provides some components:

- `Image` - An `<img/>`element

```jsx
<Image name="cat-dog" width={200} height={200} />
```

- `Object` - An `<object/>` element

```jsx
<Object name="cat-dog" width={200} height={200} />
```

- `Icon` - Renders `<svg/>` as an icon

```jsx
<Icon name="like" width="40px" height="40px" color="red" stokeWidth="2px" />
```

The components above accepts the following **props** and all other valid props of the type of `HTML` element rendered by the component:

- `name` - Name of asset
- `library?` - (Optional) ID of the library to get the asset
- `project?` - (Optional) ID of the project to get the asset
- `uid?` - (Optional) ID of the user that the asset belongs to

> If an optional prop is not provided, the corresponding default value set at the instance of [`Valency`](https://github.com/ValencyHQ/vanilla) class which is asssigned the the [ValencyProvider](#valencyprovider) will be used.

### `ValencyProvider`

A provider that will pass the provided instance of [`Valency`](https://github.com/ValencyHQ/vanilla) through the component tree without having to pass props down manually at every level.

```jsx
import { ValencyProvider } from '@valencyhq/react'

const valent = new Valency({
      uid: 'Your user ID',
      project: 'Your default project ID',
      library: 'Your default library ID',
})

// ...
<ValencyProvider value={valent}>
      {/* Place components that will use valency here */}
</ValencyProvider>
//..
```

### Hooks

### <span id="usevalency">`useValency()`</span>

<span id="usevalency">`useValency`</span> hook provides a set of APIs.

```jsx
import { useValency } from '@valencyhq/react'

// ...
const { get, getConfig, setConfig, asset } = useValency()
//..
```

The following are functions and properties exposed by the [`useValency()`](#usevalency) hook:

- [`get()`](https://github.com/ValencyHQ/vanilla#valencygetfn): Returns a URL to the provided `assetName`. [(See documentation)](https://github.com/ValencyHQ/vanilla#valencygetfn)
- [`getConfig()`](https://github.com/ValencyHQ/vanilla#valencygetconfigotherconfig): Returns configuration object. [(See documentation)](https://github.com/ValencyHQ/vanilla#valencygetfn)
- [`setConfig()`](https://github.com/ValencyHQ/vanilla#valencysetconfigotherconfig): Use to globally update configuration. [(See documentation)](https://github.com/ValencyHQ/vanilla#valencysetfn)
- [`asset`](https://github.com/ValencyHQ/vanilla#valencyget-shorthand-properties): Valency provides convenient shorthand properties to Valency.get() which provides an intuitive way to get an asset's URL. [(See documentation)](https://github.com/ValencyHQ/vanilla#valencygetfn)

## <span id="contributing">👨‍🔧 Contributing</span>

For more info on how to contribute please see the [contribution guidelines](./CONTRIBUTING.md).
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](./README.md)

## <span id="license">🧾 License</span>

React-valency is licensed under the [MIT License](https://github.com/ValencyHQ/react/blob/master/LICENSE).

[build-image]: https://img.shields.io/github/workflow/status/ValencyHQ/react/CI?style=flat-square
[codecov-image]: https://img.shields.io/codecov/c/github/ValencyHQ/react.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/ValencyHQ/react
[npmv-image]: https://img.shields.io/npm/v/@valencyhq/react.svg?style=flat-square
[npmv-url]: https://www.npmjs.com/package/@valencyhq/react
[npmd-image]: https://img.shields.io/npm/dm/@valencyhq/react.svg?style=flat-square
[npmd-url]: https://www.npmjs.com/package/@valencyhq/react

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