linkPlugins

Plugins are the easiest way for customizing renderer behavior of any renderer object. You can plug plugins into an existing renderer using .plug() method:

1linkconst baseRenderer = new SomeRenderer();

2linkconst renderer = baseRenderer.plug(() => new MyPlugin());

info IMPORTANT

You MUST pass a plugin factory function to .plug(). So this is wrong:

1linkconst myPlugin = new MyPlugin();

2linkconst renderer = baseRenderer.~plug~~~~(~myPlugin~~~~~~~~)~;

And this is correct:

1linkconst renderer = baseRenderer.plug(() => new MyPlugin());

info IMPORTANT

.plug() method returns a new renderer object. So this does nothing:

1linkbaseRenderer~~~~~~~~~~~~.~plug~~~~(~(~)~ ~=>~~ ~new~~~ ~MyPlugin~~~~~~~~(~)~)~;~

But this creates a customized renderer:

1linkconst renderer = baseRenderer.plug(() => new MyPlugin());

linkDefault Plugins

The following plugins are provided by Render-JSX package itself. They are all plugged in into CommonDOMRenderer by default, but you can plug them in into other renderers to get their functionality.

linkRef Plugin

Allows you to use refs on your elements. Can be plugged into any renderer.

1linkimport { RefPlugin } from 'render-jsx/common/plugins';

linkContent Prop Plugin

Allows setting content (e.g. inner HTML) of elements via _content property. Can be plugged into any renderer.

1linkimport { ContentPropPlugin } from 'render-jsx/common/plugins';

linkEvent Handler Plugin

Allows attaching functions as event handlers to DOM elements. Can be plugged into LiveDOMRenderers.

1linkimport { EventHandlerPlugin } from 'render-jsx/dom/plugins';

linkInput State Plugin

Allows capturing state of an <input> element via a callback. Can be plugged into LiveDOMRenderers.

1linkimport { InputStatePlugin } from 'render-jsx/dom/plugins';

linkOption Object Value Plugin

Allows setting custom data as value of <option> elements. Can be plugged into LiveDOMRenderers.

1linkimport { OptionObjectValuePlugin } from 'render-jsx/dom/plugins';

linkStyle Plugin

Allows setting element styles using objects. Also enables usage of custom plugins implementing SetStylePlugin.

1linkimport { StylePlugin } from 'render-jsx/dom/plugins';

linkClass Plugin

Allows setting element classes using arrays or toggle maps. Also enables usage of custom plugins implementing AddClassPlugin or ToggleClassPlugin.

1linkimport { ClassPlugin } from 'render-jsx/dom/plugins';

linkFunctional Component Plugin

Allows use of functional components. Can be plugged into any renderer.

1linkimport { FunctionalComponentPlugin } from 'render-jsx/component/plugins';

linkLive Component Processor

Allows use of life-cycle hooks in components. Can be plugged into live renderers (implementing LiveRendererLike interface).

1linkimport { LiveComponentProcessor } from 'render-jsx/component/plugins';