This is a multi-file application example using React-EXE.
It demonstrates how you can create complex applications with multiple
components, pages, and even routing!
Features Demonstrated:
Multiple file structure
React Router integration
Animation with Framer Motion
Component composition
Styling with Tailwind CSS
);
};
export default Home;
`,
},
{
name: "pages/About.tsx",
content: `
import React from 'react';
import { motion } from 'framer-motion';
const About = () => {
return (
About Page
React-EXE is a powerful library for executing React components on the fly.
It supports multi-file applications like this one!
{[1, 2, 3].map((item) => (
Feature {item}
This is an example of a card that demonstrates Framer Motion animations
in a multi-file React component.
))}
);
};
export default About;
`,
},
{
name: "pages/NotFound.tsx",
content: `
import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
const NotFound = () => {
return (
404
Page Not Found
The page you're looking for doesn't exist or has been moved.
Return Home
);
};
export default NotFound;
`,
},
];
function App() {
return (
);
}
```
### Using Custom Hooks and Utilities in Multi-File Apps
You can also create and use custom hooks, utilities, and TypeScript types across multiple files:
```tsx
import { CodeExecutor } from "react-exe";
const files = [
{
name: "App.tsx",
content: `
import React from 'react';
import ThemeProvider from './theme/ThemeProvider';
import ThemeSwitcher from './components/ThemeSwitcher';
import UserProfile from './components/UserProfile';
import { fetchUserData } from './utils/api';
const App = () => {
return (
);
};
export default UserProfile;
`,
},
];
function App() {
return (
);
}
```
### With Custom Error Handling
```tsx
import { CodeExecutor } from "react-exe";
function App() {
return (
{
console.error("Component error:", error);
// Send to error tracking service
trackError(error);
},
// Custom security patterns
securityPatterns: [
/localStorage/i,
/sessionStorage/i,
/window\.location/i,
],
}}
/>
);
}
```
## Configuration Options
The `config` prop accepts the following options:
```typescript
interface CodeExecutorConfig {
// External dependencies available to the rendered component
dependencies?: Record;
// Enable Tailwind CSS support
enableTailwind?: boolean;
// Custom className for the container
containerClassName?: string;
// Custom inline styles for the container
containerStyle?: React.CSSProperties;
// Custom className for error messages
errorClassName?: string;
// Custom inline styles for error messages
errorStyle?: React.CSSProperties;
// Custom security patterns to block potentially malicious code
securityPatterns?: RegExp[];
// Error callback function
onError?: (error: Error) => void;
}
```
## Code Input Types
React-EXE accepts code in two formats:
1. **Single File**: Pass a string containing the React component code
```typescript
// Single file as a string
const code = `
export default function App() {
return
Hello World
;
}
`;
```
2. **Multiple Files**: Pass an array of CodeFile objects:
```typescript
// Multiple files
const code = [
{
name: "App.tsx",
content:
"import React from 'react';\nimport Button from './Button';\n...",
isEntry: true, // Mark this as the entry point
},
{
name: "Button.tsx",
content:
"export default function Button() { return ; }",
},
];
```
The `CodeFile` interface:
```typescript
interface CodeFile {
name: string; // File name with extension (used for imports)
content: string; // File content
isEntry?: boolean; // Whether this is the entry point (defaults to first file if not specified)
}
```
## Security
React-EXE includes built-in security measures:
- Default security patterns to block potentially harmful code
- Custom security pattern support
- Error boundary protection
Default blocked patterns include:
```typescript
const defaultSecurityPatterns = [
/document\.cookie/i,
/window\.document\.cookie/i,
/eval\(/i,
/Function\(/i,
/document\.write/i,
/document\.location/i,
];
```
## TypeScript Support
React-EXE is written in TypeScript and includes type definitions. For the best development experience, use TypeScript in your project:
```tsx
import { CodeExecutor, CodeExecutorConfig, CodeFile } from "react-exe";
const config: CodeExecutorConfig = {
enableTailwind: true,
dependencies: {
"my-component": MyComponent,
},
};
const files: CodeFile[] = [
{
name: "App.tsx",
content: `export default function App() { return