# @workday/canvas-kit-react-common

> A module of common utilities shared across canvas components

Latest version **4.8.1** (published 2021-07-09) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @workday/canvas-kit-react-common
pnpm add @workday/canvas-kit-react-common
yarn add @workday/canvas-kit-react-common
bun add @workday/canvas-kit-react-common
```

## Health

**Score 45/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.8.1 |
| Published | 2021-07-09 |
| First published | 2019-06-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 157.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 363 |
| Author | Workday, Inc. |
| Maintainers | workday-canvas-kit, justin.pante, neema.mahdavi, byed, joseph.le, anicholls |
| Keywords | canvas, canvas-kit, react, components, workday, common |

## Links

- npm: https://www.npmjs.com/package/@workday/canvas-kit-react-common
- Repository: http://github.com/Workday/canvas-kit/tree/master/modules/common/react
- npm.io page: https://npm.io/package/@workday/canvas-kit-react-common

## Dependencies (9)

- [uuid](https://npm.io/package/uuid.md) ^3.3.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.14
- [chroma-js](https://npm.io/package/chroma-js.md) ^2.1.0
- [rtl-css-js](https://npm.io/package/rtl-css-js.md) ^1.13.1
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.28
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27
- [emotion-theming](https://npm.io/package/emotion-theming.md) ^10.0.10
- [@workday/canvas-colors-web](https://npm.io/package/@workday/canvas-colors-web.md) ^2.0.0
- [@workday/canvas-kit-react-core](https://npm.io/package/@workday/canvas-kit-react-core.md) ^4.8.1

## 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

- 4.8.1 (latest) — 2021-07-09
- 4.8.3 (support) — 2021-08-13
- 4.7.1-next.18 (next) — 2021-05-31
- 5.0.0-beta.1-next.6 (prerelease-next) — 2021-02-19
- 5.0.0-beta.0 (prerelease) — 2021-02-05
- 4.0.0-prerelease.f1e1a93.16 (canary) — 2020-05-05
- 4.8.2 — 2021-07-12
- 4.8.0 — 2021-06-16
- 4.7.1-next.16 — 2021-05-31
- 4.7.1-next.15 — 2021-05-29
- 4.7.1-next.14 — 2021-05-29
- 4.7.1-next.12 — 2021-05-26
- 4.7.1-next.11 — 2021-05-21
- 4.7.1-next.10 — 2021-05-18
- 4.7.1-next.9 — 2021-05-11
- … 284 more at https://npm.io/package/@workday/canvas-kit-react-common/versions

## README

# Canvas Kit Common

A module of common utilities shared across canvas components.

## Installation

```sh
yarn add @workday/canvas-kit-react
```

or

```sh
yarn add @workday/canvas-kit-react-common
```

Includes:

- [Canvas Provider](#canvas-provider)
- [Theming](#theming)
- [Bidirectionality](#bidirectionality)

### Static Properties

> None

### Component Props

This component extends the HTML `div` element. All additional props that are passed to this
component that are valid HTML attributes will be rendered as part of the wrapper `div` element. This
includes custom `data-*` attributes such as `data-test-id` to help facilitate automation testing.

### Required

#### `anchorElement: Element | null`

> The reference element used to position the popper.

#### `children: React.ReactNode | ((props: {placement: Placement}) => React.ReactNode)`

> The element used as the popper.

---

### Optional

#### `containerElement: Element`

> The element that contains the portal children when `portal` is true.

Default: `document.body`

---

#### `open: boolean`

> Flag to determine whether to show the popper. When true, the popper is shown.

Default: `true`

---

#### `placement: Placement`

> The placement of the popper relative to the `anchorElement`. Valid placements are:

- auto
- top
- right
- bottom
- left

> Each placement can have a variation from this list:

- -start
- -end

Default: `bottom`

---

#### `popperOptions: PopperOptions`

> Additional options passed to the `popper.js` instance.

---

#### `portal: boolean`

> Flag to determine whether to use a portal for the popper. When false, the popper stays within the
> DOM hierarchy of it's parent. When true, the popper is attached to the `containerElement`.

Default: `true`

---

## Canvas Provider

This provider includes all of the Canvas Providers below. This is the way most consumers should use
the provider. This provider is required for our theming capabilities, so you can find more
information in the [theming documentation](./lib/theming/README.md).

**We strongly encourage you to use this in your application to wrap all Canvas components.**

```tsx
import * as React from 'react';
import {CanvasProvider} from '@workday/canvas-kit-react-common';

<CanvasProvider>{/* All your components containing any Canvas components */}</CanvasProvider>;
```

#### Storybook Decorator

We provide a [storybook decorator](../../utils/storybook/CanvasProviderDecorator.tsx) to wrap your
stories in a `CanvasProvider` (including `InputProvider`) automatically.

Add this decorator to your `/.storybook/preview.js` configuration file to apply to all stories:

```js
import {CanvasProviderDecorator} from '../utils/storybook';

export const decorators = [CanvasProviderDecorator];
```

Or, add it to stories individually:

```js
import {CanvasProviderDecorator} from '../../../../utils/storybook';

export default {
  title: 'MyComponent',
  component: MyComponent,
  decorators: [CanvasProviderDecorator],
};

// OR

MyStory.decorators = [CanvasProviderDecorator];
```

---

## Theming

Theming documentation has its own README. You can find it [here](./lib/theming/README.md).

---

## Bidirectionality

Bidirectionality is provided by Theming. You can find Theming documentation
[here](./lib/theming/README.md#bidirectionality).

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