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 --saveTable of Contents
🪄 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
📖 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
Valencyclass 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 providedassetName. (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.