@codux-boards/react-bootstrap

@codux-boards/react-bootstrap

React Bootstrap is the official React implementation of the Bootstrap framework, providing a comprehensive collection of responsive UI components for building modern web applications.

This package provides a collection of pre-built React Bootstrap components designed specifically for use within the Codux visual editor. Once installed, these components will automatically appear in your Codux Add Elements panel, allowing for seamless drag-and-drop integration into your projects.

Features

• Ready-to-use React Bootstrap components optimized for Codux
• Mobile-first responsive design
• Accessible UI elements
• Customizable through Codux's visual interface
• Components include:
  • Buttons
  • Cards
  • Forms and Input controls
  • Navigation components
  • Layout elements (Grid, Container)
  • Modals and Overlays
  • And more...

Installation & Usage

Automatic

• When creating a new project using Codux, select React Bootstrap to add it as a library.
• Open the Add Elements panel when viewing your app or boards, to find React Bootstrap under the "External Libraries" category.
• Drag on stage, or click to select any React Bootstrap component to add it to your current selection on the Stage.

Manual

• Install React Bootstrap in your Codux project:

npm i -S react-bootstrap bootstrap

or

yarn add react-bootstrap bootstrap

• Install the Codux React Bootstrap integration as a devDependency:

npm i -D @codux-boards/react-bootstrap

or

yarn add -D @codux-boards/react-bootstrap

• Open your project in Codux.
• Open your Codux configuration, and add the following:

"addPanel": {
    "assets": [
      "@codux-boards/react-bootstrap"
    ]
  }

• Import the styles for Bootstrap in your "Board Global Setup" / application top level component (root.tsx):

import 'bootstrap/dist/css/bootstrap.min.css';

• Open an App or Board in the project.
• Open to the Add Elements panel.
• Find React Bootstrap under the "External Libraries" category.
• Drag and drop components onto the Stage.
• Customize data and styling using Codux's visual interface.

Requirements

• Codux editor installed
• React 18+
• Node.js 20+

License

MIT

Author

Codux Team