Bynder UI components

Bynder UI components to support frontend developers on building their web applications.

React Formulation

The Bynder React Formulation is an open source solution for easy form validation in React JavaSricpt applications. It was inspired by another open source project called react-reformed.

Installation

npm install @bynder/react-formulation --save

Demo

If you want to try out a little demo first, you can check it out here or try it yourself:

git clone git@github.com:Bynder/react-formulation.git
cd react-formulation
npm install
npm start

Usage

React Formulation offers two types of forms. The first one is a high order component for larger forms, the second one is a component for a form with just one input field and a submit and cancel button.

HOC

If you have a larger form you'll use the High order component:

import { withValidation, Validator } from '@bynder/react-formulation';

@withValidation({
    validateOn: 'change', // optional, default value is 'blur'
    schema: {
        firstname: {
            required: true,
        },
        lastname: {
            minLength: 2,
            maxLenght: 30,
        },
        // ...more validation rules
    }
})
class YourForm extends React.Component {
    componentWillMount() {
        this.props.setInitialModel({
            firstname: 'Foo',
            lastname: 'Bar',
        });
    }

    onSubmit() {
        // handle submit
    }

    render() {
        // Wrap your entire form in a <Validator.Form> component
        // Add a submit handler
        // Wrap every input in a <Validator> component
        // Provide a name to Validator (must match the name you provided in the schema)
        return (
            <Validator.Form onSubmit={this.onSubmit}>
                <Validator name="firstname">
                    <input />
                </Validator>
                <Validator name="lastname">
                    <input />
                </Validator>
                <button type="submit">Submit</submit>
            </Validator.Form>
        );
    }
}

export default YourForm;

Inline Form

For forms with just a single input you'll use the Inline Form component:

import { InlineForm } from '@bynder/react-formulation';

// Wrap your input and buttons in an <InlineForm> component.
// Provide the name of your input, validation rules, initial value,
// and optionally custom messages to this component.
// Add an onSubmit handler.
// Wrap the input in a <InlineForm.Field> component.
const YourInlineForm = () => (
    <InlineForm
        name="firstname"
        initialValue="Foo"
        rules={{
            required: true,
            minLength: 2,
            maxLength: 30,
        }}
        messages={{
            // Custom validation messages
            required: 'Please don\'t leave me empty',
            minLength: condition => `Please use a minimum of ${condition} characters`,
        }}
        onSubmit={(val) => { // handle submit }}
    >
        <InlineForm.Field resetOnEscape>
            <label htmlFor="inlineform-name">Name</label>
            <input id="inlineform-name" />
        </InlineForm.Field>
        <InlineForm.Errors /> // (optional) This will display the error messages
        <InlineForm.Cancel> // (optional) This will reset your form when you click cancel
            <button type="button">
                Cancel
            </button>
        </InlineForm.Cancel>
        <InlineForm.Submit> // (optional) This disables the submit button if the field isn't valid
            <button type="submit">
                Save
            </button>
        </InlineForm.Submit>
);

export default YourInlineForm;

More information

GitHub repository: https://github.com/Bynder/react-formulation

npm page: https://www.npmjs.com/package/@bynder/react-formulation

Compact View

The Bynder Compact View is the easiest way to get assets from Bynder into your web app. It's a JavaScript component that allows developers to add support for selecting and importing assets from Bynder Asset Bank without having to worry about all the intricacies related to building a file picker: UI design, authentication, API requests, etc. This component fetches all the content related to the assets and their metadata through the Bynder API and renders it by replicating Bynder look and feel. Users can query, filter (by metaproperties, tags and existing collections) and select assets to then import them into another part of the application.

Setup

To setup the Bynder Compact View in your web app, add the following lines to your page:

Stylesheets

<link rel="stylesheet" type="text/css" href="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/css/compactview_global-1.0.1.css">

Scripts

<script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.0.1.min.js"></script>

Usage

Include <div id="bynder-compactview"></div> on your page to create a button that will allow you to load the Compact View. The following attributes can be defined:

Attribute Description Possible Value Default Value
data-language Set language for the Compact View en_US, nl_NL, es_ES en_US
data-button Button text Any Open Compact View
data-folder Define custom folder name for Compact View Any bynder-compactview
data-zindex Set the z-index of the Compact View Between 1 and 16777270 100
data-collections Enable the collections in the Compact View true or false false
data-defaultEnvironment Set a default environment for the Compact View Bynder URL or empty Empty
data-header Set the header as visible true or false true
data-autoload Enable automatic loading after rendering true or false false
data-fullScreen Set the Compact View to have the whole parent container's dimensions true or false false

Example:

<div id="bynder-compactview"
     data-language="en_US"
     data-button="Open Compact View"
     data-folder="bynder-compactview"
     data-zindex="300"
     data-collections="true"
     data-defaultEnvironment="https://example.bynder.com"
     data-header="true"
     data-autoload="true"
     data-fullScreen="false"
>
</div>

Once the assets are selected, they are submitted by the Compact View using CustomEvents. They will returned in a array of objects that can be handled adding a listener to your page:

document.addEventListener("BynderAddMedia", function (e) {
    var assetsToImport = e.detail;
});

Authentication

For the authentication to work, you will need to allow pop-ups from your domain. Otherwise you will get an error message when you press the "Continue" button after inserting your Bynder URL. Besides that you will need a valid Bynder account URL and a valid login (username/password) for that same account.

Demo

If you want you can try out the Compact View demo here or try it yourself by using the following HTML code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Compact View</title>
        <link rel="stylesheet" type="text/css" href="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/css/compactview_global-1.0.1.css">
    </head>

    <body>
        <!-- Compact View Button -->
        <div id="bynder-compactview"
             data-language="en_US"
             data-button="Open Compact View"
             data-folder="bynder-compactview"
             data-zindex="300"
             data-collections="true"
             data-defaultEnvironment=""
             data-header="true"
             data-autoload="true"
             data-fullScreen="true"
        >
        </div>
        <script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.0.1.min.js"></script>
        <div id="importedAssets"></div>
        <script>
            document.addEventListener('BynderAddMedia', function (e) {
                // The selected assets go in the event detail property
                var selectedAssets = e.detail;

                var importedAssetsContainer = document.getElementById('importedAssets');
                importedAssetsContainer.innerHTML = '';

                for (var i=0; i< selectedAssets.length; i++) {
                    // Get the webimage thumbnail of the asset
                    importedAssetsContainer.innerHTML += '<img src=' + selectedAssets[i].thumbnails['webimage'] + ' />';
                }
            });
        </script>
    </body>
</html>