Craft interactive and engaging user experiences for your Modyo applications with the Dynamic Framework's robust collection of pre-built React components. 

Our components are designed to simplify your development workflow and empower you to build modern and scalable microfrontends.

Explore the comprehensive catalog of React components and access detailed reference on the official Dynamic Framework React component documentation.

Getting Started with React Components

To begin using React components, follow these steps:

1. Install the React Base Template: Open your terminal and run the following command:

   						npx @modyo/cli@latest get dynamic-react-base-template
   					

   Follow the install guide to complete the installation and project setup.
2. Navigate to Component File: Once the project is installed, open the src/components/MyComponent.tsx file.
3. Create Your React Component: Let's create a simple list component by replacing the code from MyComponent.tsx with this:

   						import { DList, DListItem } from '@dynamic-framework/ui-react';
   export default function MyComponent() {
   	const items = ['Item 1', 'Item 2', 'Item 3'];
   	return (
   		<div id="my-component">
   			<DList>
   				{items.map((item) => (
   					<DListItem key={item} >{item}</DListItem>
   				))}
   			</DList>
   		</div>
   	);
   }
   					

4. Run the Project: Start the development server using the command npm start.

Styling Your React Components

Dynamic Framework makes it easy to style your React components with a:

1. Component Properties: Many components offer properties to control their appearance (e.g., color, size, etc.). Refer to the Dynamic Framework React component documentation for details. For example you can change the color palette of the component by assigning a theme property.

   						<DListItem key={item} theme="primary">{item}</DListItem>
   					

2. CSS Classes: Use the CSS classes from Dynamic Framework or your own custom CSS to style the component elements directly.

   						:root {
   // --bs-danger-100: #45e031;
   	--custom-widget-text-color: #fff;
   	--custom-widget-background-color: #cb9832;
   }
   
   #my-component .list-group-item{
   	color: var(--custom-widget-text-color);
   	background-color: var(--custom-widget-background-color);
   }
   					

   You can mix the component's properties with our custom CSS classes, see the syling components section for more details.