react.ooui
React OOUI provides React bindings for OOUI.
Usage
import React from 'react';
// OOUI is a peer dependency, and must be in scope.
import 'oojs-ui';
// All OO.ui classes are availble.
import { ButtonWidget } from 'react.ooui';
const App = () => (
// props are mapped to OOUI config.
// event handlers are translated from `on*` props.
<ButtonWidget label="Go" onClick={() => alert('Clicked!')} />
);The ref will always refer to the OO.ui object. This object may change over time, so use the useCallback() hook to respond to changes in the object.
import { useCallback } from 'react';
import 'oojs-ui';
import { ButtonWidget } from 'react.ooui';
const App = () => {
const buttonRef = useCallback(obj => {
if (obj === null) {
return;
}
obj.on('click', () => alert('Clicked!'));
});
return (
<ButtonWidget ref={buttonRef} label="Go" />
);
};Custom OO.ui classes can be created with the fromOOUI( class, [requirePros]) method.
import { useCallback } from 'react';
import 'oojs-ui';
import { fromOOUI } from 'react.ooui';
// OO.ui.MyCustomWidget( fieldName, [config] );
// config:
// - name
const CustomWidget = fromOOUI(OO.ui.MyCustomWidget, [ 'fieldName' ]);
const App = () => (
<CustomWidget fieldName="awesome" name="sauce" />
);OOUI Compoments may be used in properties where the OOUI class accepts an OOUI object.
import { useState } from 'react';
import 'oojs-ui';
import { FieldsetLayout, FieldLayout, TextInputWidget } from 'react.ooui';
const App = () => {
const [ value, setValue ] = useState( '' );
return (
<FieldsetLayout
label="Example of a fieldset layout"
items={[
<FieldLayout
key="text-input"
label="Field One"
fieldWidget={
<TextInputWidget
placeholder="A text input field"
value={value}
onChange={value => setValue( value )}
/>
}
/>
]}
/>
);
};