Photo by Oscar Sutton on Unsplash

React Studio code generator is now turbocharged 🚗 ️

React Studio
3 min readFeb 7, 2020

--

We’ve released 1.7.9 version of React Studio. You’ll get the update automatically by opening your React Studio app on your Mac.

Whats new!

  • “Hot reload” for generated code, this makes code exports many times faster after the first code export. Just click “Open in Web Browser” and see the difference yourself.
  • Improvements to Drawer menu; direction: left, right and support for multiple states.
  • CSS update which blocks click-throughs for components. This is handy e.g. when you need to create custom modal component which blocks all other buttons on screen.
  • Added two new props for rectangle vectors ; Fill color and Stroke color. This means that you can change the color outside the element. E.g. via Backend or Data slot value.
  • Fixed Element Copy & Paste issues (will not fix old projects)
  • Added currently edited Screen/Component name into Design canvas.
  • Added Dummy Login plugin to default plugins. Use this plugin as starting point for writing your own custom Login gate.
  • Project map notes can be placed into Map Sections
  • Added block name into Script Editor window (handy when you’re not sure which screen/component the script is linked to)
  • Bunch of bug fixes

“Hot reload” for code generator

Code generator when using “Open in Web Browser” function is now much faster. The time saving can be even minutes when working on slower computer or bigger projects. First export still takes some time because it needs to copy thousands of files but after the initial export everything will run much smoother from now on.

Data linkages for Rectangles and Drawer menu improvements

Sometimes you may want to change the background color of a rectangle based on Data. This is now possible because Fill color and Stroke color props are available in Data linkages. This means you can simply change the color code e.g. in Data slot and rectangle will change it’s color automatically.

Drawer menu supports now Left and Right. This means that you can set the screen side which Menu appears from Drawer settings (see screenshot below).

Here’s a demo project which showcases the right Drawer menu and changing the rectangle fill and stroke colors. Example project contains also demo of custom made “modal” component.

https://neonto.cloud/u/reactstudio177demo

Download React Studio free from www.reactstudio.com

Full React Studio changelog here: https://docs.neonto.com/reactstudiochangelog/

React Studio forum: https://discuss.reactstudio.com/

--

--

React Studio

The premium app design tool for the most advanced JavaScript UI library — React JS www.neonto.com/reactstudio