npm install @olive/reactNOTE: You can also install from a git branch to test unreleased code.
Import from our transpiled ES6 library (allows tree-shaking, requires that your project uses ES6 module syntax).
import { Olive, Button } from '@olive/react'IMPORTANT: Use of this library requires that you pass your application content as a child to the top-level <Olive /> component, as demonstrated here.
IMPORTANT: We output deprecation warnings to the browser console. It is important to pay attention to the console while developing, and address these warnings so you have a smooth upgrade to future major releases.
We use the open source tool Storybook to develop and document our UI components in isolation.
You will find the API documentation for our latest published version at the OliveReact GitHub Pages site.
If you have OliveReact installed as a dependency in your project, you can view the documentation for that version locally using npx.
-
At the root of your project, execute:
npx olive-react -
Open http://localhost:5678 in your browser to view documentation for your locally-installed version of the @olive/react library.
-
If port 5678 is already in use on your system, you can provide an alternate using the
--portflag:npx olive-react --port 8888
Some components are marked as experimental or in an alpha state, so keep the following in mind:
- These components can have breaking changes, so pay attention to the CHANGELOG when updating
- We welcome all feedback on these components so we can make them better for you!
You must provide a lang attribute on the html element.
- OliveReact uses the
langattribute to translate internal strings. - This is also an accessibility requirement: assistive technologies use the
langattribute to determine in which language to operate. - English will be used if a value for the
langattribute is not supplied, or if the supplied value is not recognized. - OliveReact does not translate any strings provided to components by consumers (all strings should be translated before used as prop values).
You can find tips for troubleshooting common issues here.
DocuSign uses Artifactory to deliver NPM packages. If installation is failing, you must first set up your environment to fetch packages from the internal NPM registry.
View the Artifactory guide for more information.
If you cannot see the knobs/addons panel in Storybook, try the following:
- toggle the panel's visibility by pressing
A - toggle the panel's orientation by pressing
D
If clicking an interactive element in a story doesn't do anything, fear not, we have done that on purpose. Presentational components don't really do much on their own, so if you want to see something wired up, then look at a component's example story.
Please read the contributing guidelines (which include directions on linking from your application to a local copy of the OliveReact respository in order to facilitate active development).
You can view a sample application that leverages the OliveReact library here, bootstrapped from Create React App.
Can't find what you're looking for in OliveReact? Check out the @ds/components shared library for more!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent