CODEWITHSUNDEEP
twitter-bootstrapreactjs
mguijarr
mguijarr

Reputation: 7930

Adding a custom bootstrap component in react-ui-bootstrap builder

I would like to add a custom bootstrap component in the list of available components in react-ui-builder ; specifically I would like to be able to add components like the x-editable widget. Is it something supported by react-ui-builder ? How can this be achieved ?

I am making a study to know if my team would be able to use this tool, for the moment I didn't try anything (yet) so any pointer would be appreciated.

Upvotes: 0

Views: 291

Answers (1)

Alexander Pustovalov
Alexander Pustovalov

Reputation: 164

Start the builder. First of all you have to clone the project from the gallery. There is only one project BootstrapLayouts with React-Bootstrap components inside of it.

Create an empty folder for our project and copy the absolute path to it.

In the gallery click on “Clone” option and enter the absolute path to the empty folder we created. Having cloned successfully builder opened the project’s pages.

As far as x-editable is an jQuery plugin you have to create a React component wrapper for it in order to use it in the builder.

Put an HTML anchor component onto the page elsewhere. Then generate a wrapper’s source code in “Enhanced" group and named it “XEditableText”. Webpack will compile new component and it will appear in the list of components.

Go to the source code and check if there is new file for component.

It’s time to include x-editable plugin into project source code.

You have to download a distributive of x-editble plugin. You need here only a distribution for Bootstrap version 3. Copy this folder into our project in new folder src/libs, but you can create any folder you wish inside of project’s root folder.

X-editable requires Bootstrap jQuery plugins as well, so you need to download bootstrap.js file and copy it into src/assets/js folder.

Then go to metainfo folder of the builder “.builder", and open it. Find index.js file in src folder. This is the entry point of the builder’s webpack, and you have to include require() entries for x-editable plugin providing relative path to it's source code files. Enter require() entry for bootstrap.js as well.

Now you need to modify component’s source code. You have to use jQuery plugin after component is mounted into DOM, so just rewrite method “componentDidMount” add 

componentDidMount: function(){
    $(React.findDOMNode(this.refs.editableElement)).editable();
}

Also there is some additional attributes for x-editable which we have to add as well to component’s tag (add them in render method):

render: function() {
    return (
        <a href="#"
           ref="editableElement"
           id="username"
           data-type="text"
           data-pk="1"
           data-title="Enter username">User Name</a>
    );
}

Finally you can see ant try component on the page in live-preview mode. And place this component where you wish on the page.

Upvotes: 1

Related Questions