# @episerver/react-to-dijit-adapter

> An adapter for react components to run as dijit widgets.

Latest version **1.1.0** (published 2020-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @episerver/react-to-dijit-adapter
pnpm add @episerver/react-to-dijit-adapter
yarn add @episerver/react-to-dijit-adapter
bun add @episerver/react-to-dijit-adapter
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-01-22 |
| First published | 2019-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | alwa, barteksekula, ben_mckernan, niis, robinjac, ryanbare, seriema |

## Links

- npm: https://www.npmjs.com/package/@episerver/react-to-dijit-adapter
- Repository: https://github.com/ben-mckernan/react-to-dijit-adapter
- npm.io page: https://npm.io/package/@episerver/react-to-dijit-adapter

## Dependencies (2)

- [@types/react](https://npm.io/package/@types/react.md) *
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) *

## Recent versions

- 1.1.0 (latest) — 2020-01-22
- 1.0.2 — 2019-11-05
- 1.0.1 — 2019-10-30
- 1.0.0 — 2019-10-29

## README

# react-to-dijit-adapter

An adapter for react components to run as dijit widgets.

## Installation

**yarn**
```sh
yarn add @episerver/react-to-dijit-adapter
```

**npm**
```sh
npm install @episerver/react-to-dijit-adapter
```

## Usage

**Entry Point**

The `asEditorWidget` function will take care or rendering your react component inside of a dijit widget. You should set the result of this function as the default export of the entry point file for your custom editor.

```javascript
import React from "react";
import { asEditorWidget } from "@episerver/react-to-dijit-adapter";

const MyComponent = ({ onChange, value }) => {
    // Your component logic here...
};

export default asEditorWidget(MyComponent);
```

Your component will be passed the `onChange` and `value` props which should be used to render the value and to notify when the value changes and a new render should occur.

**Build**

In order to build and run the component in Episerver CMS you will need to configure your build to do two things:

1. Output the bundle as AMD format with the default export as the library export.
1. Mark `dojo/_base/declare` and `dijit/_WidgetBase` as external dependencies.

The following is an example of the changes needed in a webpack config. Similar changes should be done if using another bundling tool, e.g. rollup, or parcel.

```javascript
module.exports = {
    output: {
        libraryTarget: "amd",
        libraryExport: "default",
    },
    externals: [
        "dojo/_base/declare",
        "dijit/_WidgetBase"
    ]
};
```

## Using Custom Props

It is possible to pass custom props to your editor by using either an `EditorDescriptor` or an `IMetadataAware` attribute. In both scenarios, the custom props that you want to pass to your editor should be added to an object that is assigned to the `"editorProps"` key in the `EditorConfiguration` dictionary. For example:

```csharp
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class MyEditorPropsAttribute : Attribute, IMetadataAware
{
    public void OnMetadataCreated(ModelMetadata metadata)
    {
        if (!(metadata is ExtendedMetadata extendedMetadata))
        {
            return;
        }

        extendedMetadata.EditorConfiguration["editorProps"] = new
        {
            MyProp = "Hello, world!"
        };
    }
}
```

These will then be available via your component's props argument.

```javascript
const MyComponent = ({ onChange, value, myProp }) => {
    // Your component logic here...
};
```

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