by default (can be configured via childrenContainer prop)

Example

App.tsx (Solid)
``tsx
import type { Component } from 'solid-js'

interface AppProps {
onClick: (event: MouseEvent) => void
}

export const App: Component = ({ onClick, children }) => (



)
`

main.tsx (React)
`jsx
import React from 'react'
import { Solid } from '@merged/react-solid'
import { App } from './App.tsx' // this is a Solid component

export const ReactComponent = () => {
const handleClick = (event: MouseEvent) => {
console.log('clicked!')
}

return (
component={App}
onClick={handleClick}
>
I'm a child!

)
}
`

Using the vite plugin

Lets assume, we have all our solid Components in the folder src/solid:

vite.config.ts
`ts
import { defineConfig } from "vite";
import jsxRefresh from "@vitejs/plugin-react-refresh"
import { narrowSolidPlugin } from "react-solid-bridge/plugin"

export default defineConfig({
plugins: [narrowSolidPlugin({ include: /\/src\/solid/ }), jsxRefresh({exclude: /\/src\/solid\//})],
});
`

That way, all *.tsx files inside src/solid will be handled by the solid plugin, while everything else will still be handled by react.

Bonus tip: Telling vscode how to handle both react and solid with typescript

Configure your tsconfig.json like for every other react propect.

In src/solid place another tsconfig.json that looks someting like this:

tsconfig.json
`json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js",
}
}
``