chrisle
commented
1 year ago I did manage to get a plain React to work this way...
// src/utils/greetReact.tsx
/* eslint-disable no-console */
import { getPublishDate } from '@finsweet/ts-utils';
import { createRoot } from 'react-dom/client';
/**
* Test React component.
*/
export function GreetReact(props: { name: string }) {
const { name } = props;
return <h1>Hello {name}!</h1>;
}
/**
* Greets the user by printing a message in the console.
* @param name The user's name.
*/
export const greetUser = (name: string) => {
const publishDate = getPublishDate();
console.log(
`This site was last published on ${publishDate?.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: '2-digit',
})}.`
);
const reactElement = document.querySelector('[data-element="greet-react"]');
if (!reactElement) return;
const reactRoot = createRoot(reactElement);
reactRoot.render(<GreetReact name={name}/>);
};// src/index.ts
import { greetUser } from '$utils/greetReact';
window.Webflow ||= [];
window.Webflow.push(() => {
greetUser('John Doe');
});/* tsconfig.json */
{
"extends": "@finsweet/tsconfig",
"compilerOptions": {
"jsx": "react-jsx",
"rootDir": ".",
"baseUrl": "./",
"paths": {
"$utils/*": ["src/utils/*"]
},
"types": ["@finsweet/ts-utils"]
}
}
alexiglesias93
I'm wondering if there's a way to use this with DevLink.
My use case is I would like to try using Webflow to develop the frontend but bring in React components into Webflow using this repository.