Long story short it would be really cool to build custom components with React in Wix Studio.
Elements that’s pre-built by Wix that we drag and drop is actually React components that’s built by Wix to also integrate with Wix’s UI features such as controlling design of an element, adding animations and interactions etc.
But there are limited amount of elements that’s provided by Wix it’s more than enough for basic needs and even enough for most cases but it might be not enough when advanced UI is required.
It would be really cool to build custom components using React inside Wix. So this is the summary of what I’m saying but here is the model I imagine:
We will have a folder in /public directory for custom components that we will build with React just like in custom elements. And we will write our own .jsx codes here. Basically we will write React components and export them similar to what we do in custom elements. But this time we are using React to build custom components.
→ We may even have a docs for building components that will also integrate with Wix’s UI features like animations, interactions etc. So Wix can tell us to -build your components like that, to integrate components with Wix’s features.
→ Components we build with React will have an API called .props so we will be able to set it’s props or get the current props of it. This API will allow any value that React allow. Main difference here between custom elements is the value type that’s allowed.
→ We may also be able to import current pre-built components by Wix and use these components in the components we build. These pre-built components will use Wix’s CSS so we won’t need to add CSS.
→ And also we may be able to import and use React UI libraries from npm in that way we can build advanced custom components like charts. Which we can also build with custom elements from scratch, but problem is that from scratch.
→ We will be able to use React features like useState.
→ These components will also support basic APIs of Velo like .show, hide, collapse, expand, delete, restore, rendered… etc.
→ To style the elements we can use global.css file and classes inside of it. By importing it into components we build.
→ We will be able to import and use other components we built in another component we are building. (Or components from libraries/Wix)
→ This feature might also be integrated with Codux which is Wix’s product. We may create our React components in Codux and Wix can pull the components that we built in Codux.
After we build our React components we will be able to see these components with their previews in the editor panel (inside the elements panel) and drag and drop them just like pre-built other elements.
And just like other elements we will be able to control these components with Velo by the provided APIs.
Why not to use Wix Blocks or Custom Element for this?
Wix Blocks:
- Wix Blocks already provide us pre-built components by Wix. Then point of creating custom components with React is create components that’s not available in Wix or components that’s requires advanced logic.
Note: We will also be able to create custom components in Wix Blocks just like in the editor and in that way we can even convert these custom components into a better form by adding them events, extra APIs etc. via Wix Blocks. So this feature would also available in Blocks.
Custom Element:
- We can’t use React directly inside custom elements. (Main reason)
- We need to setup CSS for each component. And we can’t import CSS.
- Custom elements won’t be integrated with Wix’s features in any way.
- Custom elements only allows string, number and boolean as data.
- We can’t use another custom element inside of another custom element which makes it harder to build advanced UI elements. And time waste.
- No libraries for custom elements we need to build it from scratch.
Potential benefits of this feature:
I think there is only one but very important benefit of this: creating advanced UI will be possible and we will be able to solve problems like repeater-in-repeater much more easier.
As well as we can publish React based custom components into marketplace via Wix Blocks in this way users that don’t have the knowledge of react or JS can use advanced UI elements like charts.
Current solution to all of these:
Anything above can be also done with custom elements. But harder and more time required as well as we will have more problems when creating advanced UI elements with custom elements. I already listed above why custom elements aren’t good always.