Consuming Board Content from Add Elements Panel

Boards with content added to the Add Elements panel appear inside the panel in a section labeled Project Library.

These are boards with components or HTML elements that have specific permutations of props, states, and styles for specific use cases. For example, you can have a button component in different boards to test different variants of colors, sizes, and shapes – each with their own properties and dependencies. Once a component variant based on a board is created, it can be added to the Add Elements panel and then reused across your app.

What Happens When You Add a Component Variant

When you add a component variant that's based on a board from the Add Elements panel into a target component, Codux adds the snippets of code from added component into the target, along with its properties and dependencies.

Suppose you're adding a component variant based on this board file, for example:

1
2
3
4
5
6
7
8
9
import React from 'react';
import { createBoard } from '@wixc3/react-board';
import { createId } from './id-creator';  
const id = createId();  
export default createBoard({
    name: 'Create-Button',
    Board: () => <div id={id}/>,
    isSnippet: true, // show/hide from Add Elements panel (true by default)
});

When you drop it into another component, Codux will write the following into the target:

1
2
3
4
5
6
import React from 'react';
import { createId } from './id-creator'  
const id = createId();  
export const Comp = () => <div>
    <div id={id}/>
</div>

Important!

For component variants to work in the Add Elements panel, the board that the component's code is based on needs to meet certain requirements. If a board with components shows up in the Add Elements panel as invalid, refer here for troubleshooting tips.

Note:

Unlike components that are on boards, components that aren't yet on boards will lose their properties and dependencies when they are added to another component, and you'll have to give them back the values that they lost.

Was this article helpful?

Yes

Codux Help Center

Browse our articles to find the answers you need

Consuming Board Content from Add Elements Panel

What Happens When You Add a Component Variant