Creating Board Files

A board is an isolated environment where components render in different configurations using various property values, states, environmental settings, and styles (alignments, paddings, and so on). Components on boards can be tested and edited along with HTML elements to fully mock where the component will be consumed in your app.
Components render in Codux using the settings described in the board’s code. Board files have the file extension .board.tsx. You can create and edit these files using the code editor built into Codux, or using a different IDE. You can also create new boards visually through the UI in Codux. Any changes you make to a board are immediately visible on the stage in Codux and saved to the board’s code file.

Board File Format 

Inside a board file, the first thing you’ll see are package imports. Because boards use JSX syntax, you’ll need to import the React package. You’ll also need our helper package, which is a required dependency for your project.
Board files also contain environment information to describe their size, color, margins, and the paddings of the canvas and window that the components render in. As with all aspects of boards, changes made to these properties through the UI immediately write and save to the board file.
Have a look at the example code file below to see what a complete board file looks like.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Required for JSX
import React from "react";
// Library for creating React component boards.
import { createBoard } from "@wixc3/react-board";
// The component to render on the board.
import { AppProductItem } from "../../../src/components/app-product-item/app-product-item";
   
// The board object.
export default createBoard({
 // The board’s name.
 name: "New Product",
 // Properties to supply the component with.
 Board:() => {
   return (
     <AppProductItem
       productId="grw2as"
imageUrl="https://static.wixstatic.com/media/d759b6_d1773d716a4746d8b70eb7c15112000e~mv2.png"
       productTitle="Swim Swim Swim"
       modelName="Red on Cyan"
       price="$9.00"
       reviewsAverageRating={4}
       reviewsCount={22}
       isAddedToCart={false}
       isNew={true}
     />
   );
 },
 // Environmental settings for the component.
 environmentProps: { 
       windowHeight: 726,
       windowWidth: 1024,
       canvasWidth: 390,
 },
});
Important!
Remember that all board objects created by Codux use the createBoard function shown in this example.

Board Helper Function 

Codux’s helper function serves as an API for creating and manipulating boards programmatically during runtime. It provides Codux with the information it needs for the board without using an actual board file. Use this function to test that you’re using proper syntax and type-checking for the board object.
This is how the helper function looks in use:
1
2
3
4
5
export function createBoard<P>(
    componentBoard: IComponentBoard<P>
) : IComponentBoard<P> {
    return componentBoard;
};
Note:
We currently only support visualizing and editing statically analyzable board objects.

Creating Boards Visually 

This article focuses on creating boards through code, but it’s worth mentioning that you can also visually create boards from within Codux for any component variation that you want to test. To create a new board, select a component from the component list and click New at the top right of the screen. Refer here for more information.
IN THIS ARTICLE