Nonflavored Prescription Medicine

    @wikimedia/react.ooui

    1.0.0 • Public • Published

    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 )}
                            />
                        }
                    />
                ]}
            />
        );
    };

    Install

    npm i @wikimedia/react.ooui

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    GPL-3.0-or-later

    Unpacked Size

    76.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • ottomata
    • annetee
    • jgiannelos-wmf
    • joakin
    • krinkle
    • jdforrester
    • edg2s
    • volker_e
    • catrope
    • santhosh.thottingal
    • cscott
    • subbu_ss
    • arlolra
    • jdlrobson
    • mateusbs17
    • brightbyte
    • phuedx
    • nrayio
    • jandre3000
    • sbassett29
    • nikerabbit