@wixc3/react-board
v4.5.3
Published
Library for creation of React component boards
Downloads
18,086
Maintainers
Keywords
Readme
@wixc3/react-board
This library is here to help you create React component boards for Codux.
Usage
Given:
// hello.tsx
import React from 'react';
export interface HelloProps {
name: string;
}
export const Hello: React.VFC<HelloProps> = ({ name }) => <div>Hello ${name}</div>;
This library can be used to create boards for Hello
:
// hello.board.tsx
import { createBoard } from '@wixc3/react-board';
import { Hello } from './hello';
createBoard({
name: 'basic board',
board: () => <Hello name="World" />,
});
You can also create boards with separation between the actual content and the board environment (context providers, board styling).
This will be helpful in board templates, to indicate to Codux where to put the component in the generated board.
Or in boards, so that when the board is converted to a code snippet, only the children of the <ContentSlot>
will be included in the snippet.
This is useful when the board is wrapped in a router or a context provider that shouldn't be included in the snippet.
// hello.board.tsx
import { createBoard, ContentSlot } from '@wixc3/react-board';
import { Hello } from './hello';
createBoard({
name: 'hello board',
board: () => (
<SomeWrappingComponent>
<p>description</p>
<ContentSlot>
<Hello name="World" />,
</ContentSlot>
<SomeWrappingComponent>
)
});
License
MIT