REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Apr 2022)

Every month I give updates in my digital garden. In April, I focused mainly on drag-drop, layout design, and autocomplete features.

Onur Dayıbaşı

Published in

React Digital Garden

3 min readApr 30, 2022

SmartLayout Design With Drag And Drop

Here you will find a quick demonstration. This is a sample Smart Layout Dnd (Drag and Drop) application. I used Smart Layout capability for NoCode development.

It allows users to design components with drag & drop.

In Design Mode, Choose Toolbar Tab;
Select a Component and Drag to any Container in SmartLayout Canvas.
When the component is dropped, the container detects the drop component and adds to itself.
Then you can also see in Layout Tree hierarchy,
Then you can select and edit the component or layout properties.

https://onurdayibasi.dev/smart-layout-with-dnd-elements.

Multiple Nested Smart Layouts

Here you will find a quick demonstration. This is a sample Multiple Nested Smart Layout application. I used Smart Layout capability for NoCode development.

In a Web Application, sometimes you need nested containers like;

a page containing a tab,
a tab containing a collapsible pane,
etc.,

If a container is a specialized component (like Tab, Collapsible), it is essential to use the nested layout model which contains another smart layout.

https://onurdayibasi.dev/smart-layout-recursive

SmartLayout Dnd With According To Drop Position

Here you will find a quick demonstration. This is a sample Smart Layout Dnd According To Drop Position application. I used Smart Layout capability for NoCode development.

In the previous examples, we don’t think about the order of the component placed. In this mini-app, SmartLayout understands drop position, and it gives a decision on where to insert. According to drop position it adds Left, Right, Bottom or Top of the other component in the container.

https://onurdayibasi.dev/smart-layout-dropzone-with-position

SmartLayout Highlight Assistance

Here you will find a quick demonstration. This is a sample Smart Layout Highlight Assistance application. I used Smart Layout capability for NoCode development.

SmartLayout Drop-Highlights helps users to design layouts with a component relative. When you drag a component to other component , a highlight assistance appears. It is a red outline which wraps the relative component. So you can understand where you drop and how design mechanics works.

https://onurdayibasi.dev/smart-layout-with-dropzone-highlights

Ace Editor

Here you will find a quick demonstration. This is a sample Basic Ace Editor for Code Editor for Web.

Ace Editor Events

Here you will find a quick demonstration. This is a sample Ace Editor Events application. It allows to listen all Ace Editor Events.

https://onurdayibasi.dev/code-editor-ace-events

Code Mirror 5

Here you will find a quick demonstration. This is a sample Code Mirror 5 application. I tried AutoComplete feature of CodeMirror 5.

https://onurdayibasi.dev/code-editor-codemirror

Code Mirror 6 (Removed…)

Here you will find a quick demonstration. This is a sample Code Mirror 6 application. Code Mirror 6 (Code mirror new version). I tried AutoComplete feature of CodeMirror 6.