PHPackages                             violet88/silverstripe-react-bridge - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. violet88/silverstripe-react-bridge

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

violet88/silverstripe-react-bridge
==================================

A Silverstripe module to make it easy to render React into the Silverstripe CMS.

5.x-dev(1y ago)00BSD-3-ClauseJavaScript

Since Sep 3Pushed 1y agoCompare

[ Source](https://github.com/Violet88github/Silverstripe-React-Bridge)[ Packagist](https://packagist.org/packages/violet88/silverstripe-react-bridge)[ RSS](/packages/violet88-silverstripe-react-bridge/feed)WikiDiscussions 5 Synced 1mo ago

READMEChangelogDependencies (6)Versions (1)Used By (0)

Silverstripe React Bridge
=========================

[](#silverstripe-react-bridge)

This module takes care of rendering custom React form fields in the Silverstripe CMS. This is useful for the parts in the CMS that are not built in React.

Installation
------------

[](#installation)

```
composer install violet88/silverstripe-react-bridge
```

Usage
-----

[](#usage)

### 1. Create a React component

[](#1-create-a-react-component)

Create a React component for your custom field. The module will pass the following props to your component:

- `name`: The name of the field
- `value`: The value of the field
- `onAutofill`: The function to which you should pass the new value of the field, as well as the name of the field. This will update the value of the field in the CMS. You can pass the new value as follows

```
onAutofill(name, value)
```

### 2. Register the React component

[](#2-register-the-react-component)

Register your React component by calling the registerMany function from SilverStripe's lib/Injector:

```
import Injector from 'lib/Injector';
import SecretField from "./SecretField";

Injector.component.registerMany({
    SecretField
});
```

I would advise to make a specific javascript file for registering your components, and include it in your project. I personally put this in a boot folder. It would look something like this:

```
import Injector from 'lib/Injector';
import SecretField from "../SecretField";

export default () => {
    Injector.component.registerMany({
        SecretField
    });
};
```

After that I would use this file in your main.js file like this:

```
/* global window */
import registerComponents from 'boot/registerComponents';

window.document.addEventListener('DOMContentLoaded', () => {
    registerComponents();
});
```

### 3. Add javascript to the CMS

[](#3-add-javascript-to-the-cms)

Add the javascript file to the CMS. You can do this by adding the following to your config.yml:

```
SilverStripe\Admin\LeftAndMain:
  extra_requirements_javascript:
    - 'app/client/dist/js/bundle.js'
```

You have to replace `'app/client/dist/js/bundle.js'` with the path to your compiled javascript file.

### 4. Create a PHP class for your custom field

[](#4-create-a-php-class-for-your-custom-field)

Now we will create a PHP class for our custom field. This class will extend ReactFormField. It would work like any other form field in Silverstripe. You can add your own logic to this class. For example, you can add validation or custom logic to the field. The only difference is, you will pass it a React component name

```