@valencyhq/react

React-valency

🤔 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

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

Table of Contents

• Basic Usage

  • Component Usage

• Live Examples

• API Reference

  • Components
  • ValencyProvider
  • Hooks
    • useValency()

• Contributing

• License

🪄 Basic Usage

1. 🧱 Components Usage

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'))

2. 🪝 Hooks Usage

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'))

▶️ Live Examples

• Basic Usage

📖 API Reference

Components

Valency provides some components:

• Image - An <img/>element

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

• Object - An <object/> element

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

• Icon - Renders <svg/> as an icon

<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 class which is asssigned the the ValencyProvider will be used.

ValencyProvider

A provider that will pass the provided instance of Valency through the component tree without having to pass props down manually at every level.

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

useValency()

useValency hook provides a set of APIs.

import { useValency } from '@valencyhq/react'

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

The following are functions and properties exposed by the useValency() hook:

• get(): Returns a URL to the provided assetName. (See documentation)
• getConfig(): Returns configuration object. (See documentation)
• setConfig(): Use to globally update configuration. (See documentation)
• asset: Valency provides convenient shorthand properties to Valency.get() which provides an intuitive way to get an asset's URL. (See documentation)

👨‍🔧 Contributing

For more info on how to contribute please see the contribution guidelines. Caught a mistake or want to contribute to the documentation? Edit this page on Github

🧾 License

React-valency is licensed under the MIT License.