How to correctly render .tsx to .html / React - javascript

Caution! A lot of code and words!
Previously, I managed to render a button from .js on React in .html in this way:
App.js:
import './App.css';
import { ConnectButton } from '#rainbow-me/rainbowkit';
import React from "react";
function App() {
return (
<div className="App">
<header className="App-header">
<ConnectButton showBalance={false} />
</header>
</div>
);
}
export default App;
index.js:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from './App';
const rootElement = document.getElementById("root1");
const root1 = createRoot(rootElement);
root1.render(
<StrictMode>
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider showRecentTransactions={true} chains={chains}
theme={mergedTheme} avatar={CustomAvatar}>
<App />
</RainbowKitProvider>
</WagmiConfig>
</StrictMode>
);
... same for root2 element
index.html:
<div id="root1"></div>
</div></nav><div class="menu-button-wrapper"><div id="root2"></div>
<script type="text/babel">
ReactDOM.render(<ParentComponent1 />, document.getElementById("root1"));
ReactDOM.render(<ParentComponent2 />, document.getElementById("root2"));
</script>
Now I have the opportunity to fix something in my project, but it is much more difficult to do it from scratch than to understand the existing examples, but nevertheless, the only problem is that in the example that has the functions I need, there is a .tsx file that already contains the <App /> function and elements in the form of a button, which I need to render, as in my project with examples above.
root.tsx:
export default function App() {
const { ENV, nonce } = useLoaderData<LoaderData>();
const [state, dispatch] = useReducer(reducer, initialState);
const { client, chains } = useWagmiClient({
enableTestnets: ENV.PUBLIC_ENABLE_TESTNETS || "false",
apiKey: ENV.ALCHEMY_API_KEY || "<API-KEY>",
});
useSiweSync({ dispatch });
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
{client && chains ? (
<WagmiConfig client={client}>
<RainbowKitAuthenticationProvider
adapter={getAuthenticationAdapter(nonce, dispatch)}
status={state.authenticationStatus}
>
<RainbowKitProvider chains={chains}>
<div
style={{
padding: "12px",
display: "flex",
justifyContent: "flex-end",
}}
>
<ConnectButton />
</div>
</RainbowKitProvider>
</RainbowKitAuthenticationProvider>
<h1>Status: {state.authenticationStatus}</h1>
<Outlet context={{ state, dispatch }} />
</WagmiConfig>
) : null}
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
I tried in many ways (like webpack cli for creating webpack-config.js to later create bundle.js to run script inside .html for rendering) to convert this code from .tsx in such a way as to render components inside .html, as I successfully did in the example above, but nothing happens, .html does not recognize any changes, there is also this .js file inside the project with root.tsx, but also it is not rendered via ReactDOM in index.html:
index.js (from the project with root.tsx):
import {
require_jsx_dev_runtime,
useOutletContext
} from "/build/_shared/chunk-MTXGPSBY.js";
import {
__toESM
} from "/build/_shared/chunk-KQHTJEE7.js";
// app/routes/index.tsx
var import_jsx_dev_runtime = __toESM(require_jsx_dev_runtime());
function Index() {
const { state } = useOutletContext();
return state.authenticationStatus === "loading" ? null : state.authenticationStatus === "authenticated" ? /* #__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("div", {
children: "Hello \u2764\uFE0F"
}, void 0, false, {
fileName: "app/routes/index.tsx",
lineNumber: 11,
columnNumber: 5
}, this) : /* #__PURE__ */ (0, import_jsx_dev_runtime.jsxDEV)("div", {
children: "Please sign in and verify with Ethereum \u{1F609}"
}, void 0, false, {
fileName: "app/routes/index.tsx",
lineNumber: 13,
columnNumber: 5
}, this);
}
export {
Index as default
};
//# sourceMappingURL=/build/routes/index-B2O2ZNVR.js.map
I tried to follow the same logic for index.html, but nothing works:
<div id="root1"></div>
<script src="path-to-index.js"></script>
<script type="text/babel">
ReactDOM.render(<Index />, document.getElementById("root1"));
</script>
Maybe someone can tell me what I'm doing wrong and how to correctly render the given .tsx file into .html, as I did earlier with .js? Thank you.

Related

How to auto-indent code string in PrismJS? NextJs APP

i am trying to use PrimsJs in a react project, my objetive is create a static template page, and add snippets, i am not sure if is the best option(primsjs) but i am trying to auto-indent the code, because actually my code is rendered in one line
THIS IS MY PAGE
import { MainLayout } from "../components/layouts/MainLayout";
import { Hero1, Hero1Code} from "../theme/blocks/hero/Hero1";
export default function Home() {
return (
<MainLayout>
<h1>Home Page</h1>
<Hero1 />
<Hero1Code />
</MainLayout>
);
}
THIS IS MY PRIMSJS COMPONENT
import React, { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";
export default function Code({ code, language }) {
useEffect(() => {
Prism.highlightAll();
}, []);
return (
<div className="Code">
<pre>
<code className={`language-${language}`}>{code}</code>
</pre>
</div>
);
}
THIS IS MY COMPONENT
import React from "react";
import { renderToString } from "react-dom/server";
import Code from "../../../components/prism/code";
export const Hero1 = () => {
return (
<section className="wrapper bg-light">
...
</section>
);
};
export const Hero1Code = () => {
const content = renderToString(<Hero1/>);
return (
<>
<div className="App">
<Code code={content} language="html" />
</div>
</>
);
};
Any help will be very welcome, also i am open to try other package
I don't think that PrismJS has such an option, in my opinion it would be best to just indent the code string before passing it to the <Code /> component.
You could use this library: https://github.com/zebzhao/indent.js
Import it:
import indent from 'indent.js';
And indent the code like this:
const content = indent.html(renderToString(<Hero1/>));
However, looking at your screenshot code example, I can see that you have a lot of divs smashed into one line. In this case, indentation would not really help, as it takes care of the relations between separate lines.
You could take a look at using a library like this, which seems to split code into separate lines.
https://www.npmjs.com/package/pretty

Reload a page after the initial load with Next.js

I have a route called "./checkout" that renders embedded elements from Xola. The issue is I am using client side routing and the page needs a refresh to load the checkout page correctly (if not, Xola elements do not show up on the DOM 1). When I try to reload the page on the initial load I get an infinite reload loop. I can't use a href for specific reasons so I need to continue to use Next.js routing. Anyway I can go about this? EDIT: I have reached out to Xola support team for further assistance.
After refresh
checkout.js
import Head from "next/head";
import { useRouter } from "next/router";
import { Container, Button } from "#mui/material";
import { makeStyles } from "#mui/styles";
import { CheckoutCard } from "../components/layout/directory";
import useIsSsr from "#/config/useSsr";
function Checkout() {
const isSsr = useIsSsr();
const router = useRouter();
const classes = useStyles();
return (
<>
{isSsr ? null : window.location.reload()}
<Head>
<title>checkout</title>
</Head>
<Container className={classes.root}>
<Button
className={classes.btn}
onClick={router.back}
color="secondary"
variant={"contained"}
>
back
</Button>
<CheckoutCard />
</Container>
</>
);
}
const useStyles = makeStyles((theme) => ({
root: { marginTop: theme.spacing(10) },
btn: { marginBottom: theme.spacing(5) },
}));
export default Checkout;
CheckoutCard.js
function CheckoutCard() {
return (
<div
className="xola-embedded-checkout"
data-seller="5f3d889683cfdc77b119e592"
data-experience="5f3d8d80d6ba9c6b14748160"
data-version="2"
id="xola-checkout"
></div>
);
}
export default CheckoutCard;
Please add one more prop to CheckoutCard component calling in checkout.js.
You need to update
<CheckoutCard
url={`https://checkout.xola.com/index.html#seller/5f3d889683cfdc77b119e592/experiences/${
url && url.slice(1)
}?openExternal=true`}
/>
to
<CheckoutCard
url={`https://checkout.xola.com/index.html#seller/5f3d889683cfdc77b119e592/experiences/${
url && url.slice(1)
}?openExternal=true`}
key={new Date().getTime()}
/>
"key" prop is to identify the component and you are going to use external service ( like iframe, not sure correctly )
So in order to render the embedded elements from Xola, you should add "key" prop for CheckoutCard component calling.

Map components are not reflecting

I'm learning React JS.Trying to map components by calling data from external JS file.
There is no error or issue in the code.
This is content.jsx inside the /src/component folder.Here I'm rendering mapped components from App.jsx.
import React from 'react';
export default function Content(props) {
<div>
<p> {props.name} </p>
<p> {props.rollNo} </p>
</div>
}
This is App.jsx inside the src folder
import React from 'react';
import Content from './component/content';
import Data from './Data'
export default function App() {
const jokeElements = Data.map( (ele) => {
return(
<Content name={ele.name} rollNo={ele.rollNo} />
);
})
return(
<div>
{jokeElements}
</div>
)
}
and rendering App.js to index.js which is in src folder. The data.js contains data in src folder.
Data.js file:
const Data=[
{
name:"Deepak",
rollNo:"123"
},
{
name:"Yash",
rollNo:"124"
},
{
name:"Raj",
rollNo:"125"
},{
name:"Rohan",
rollNo:"126"
},
{
name:"Puneet",
rollNo:"127"
},
{
name:"Vivek",
rollNo:"128"
},
{
name:"Aman",
rollNo:"129"
},
]
export default Data;
The issue I can output other JSX elements, but I'm not able to display mapped components. What's wrong with my code ?
Im guessing that "Content" component is the "Joke" component, if so, it has no return statement, try:
export default function Joke(props) {
return (
<div>
<p> {props.name} </p>
<p> {props.rollNo} </p>
</div>
);
}
You need a return statement in Joke function of content.js

How to share React context between _document.js and pages on Next.js?

Let's say I have this context:
export const ThemeContext = createContext();
export function ThemeWrapper({ children }) {
const sharedState = {
darkMode: false,
};
return (
<ThemeContext.Provider value={sharedState}>
{children}
</ThemeContext.Provider>
);
}
export function useThemeContext() {
return useContext(ThemeContext);
}
Which I can access on _document.js like this:
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ThemeWrapper, ThemeContext } from "../context/theme";
class MyDocument extends Document {
static contextType = ThemeContext;
render() {
console.log("theme", this.context);
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
class Wrapped extends Document {
render() {
return (
<ThemeWrapper>
<MyDocument />
</ThemeWrapper>
);
}
}
export default Wrapped;
Now I also want to access this context from a page:
import { useThemeContext } from "../context/theme";
const SomePage = () => {
const theme = useThemeContext();
console.log("theme", theme);
return (
<div>Hi, I'm a page</div>
);
};
_document.js logs out theme { darkMode: false } on the Next.js console when the page is first loaded but SomePage logs out theme undefined on the Chrome console everytime you navigate to it.
Any suggestions?
I need to toggle some class on the html tag depending on this context. Trying to manually toggle dark mode using Tailwind CSS.
Wrapping _document with ThemeWrapper doesn't give you access to the context inside pages (probably because it's only rendered in the server), you will need to wrap _app for that. Just note that _document will not re-render on context state changes.
For this specific use case, an alternative is to use next-themes.

react-ultimate-pagination component setup

I'm trying to use this package react-ultimate-pagination: https://github.com/ultimate-pagination/react-ultimate-pagination
I want to set it up like their basic demo example: https://codepen.io/dmytroyarmak/pen/GZwKZJ
The usage instructions at the bottom of the github page say to import the component like this:
import ReactUltimatePagination from 'react-ultimate-pagination';
But the codepen demo just shows a constant:
const UltimatePagination = reactUltimatePaginationBasic.default;
I copied the code from the demo, but since it is mismatched with the import, I have an error of UltimatePagination being undefined and reactUltimatePaginationBasic undefined.
Does anyone know how to set up this component like the demo example?
The module exports the higher oder component createUltimatePagination as a named export. To import it using es6 import syntax it has to be the following:
import {createUltimatePagination} from 'react-ultimate-pagination';
Example App:
import React, { Component } from "react";
import { render } from "react-dom";
import { createUltimatePagination } from "react-ultimate-pagination";
const Button = ({ value, isActive, disabled, onClick }) => (
<button
style={isActive ? { fontWeight: "bold" } : null}
onClick={onClick}
disabled={disabled}
>
{value}
</button>
);
const PaginatedPage = createUltimatePagination({
itemTypeToComponent: {
PAGE: Button,
ELLIPSIS: () => <Button value="..." />,
FIRST_PAGE_LINK: () => <Button value="First" />,
PREVIOUS_PAGE_LINK: () => <Button value="Prev" />,
NEXT_PAGE_LINK: () => <Button value="Next" />,
LAST_PAGE_LINK: () => <Button value="Last" />
}
});
class App extends Component {
state = {
page: 1
};
render() {
return (
<PaginatedPage
totalPages={10}
currentPage={this.state.page}
onChange={page => this.setState({ page })}
/>
);
}
}
render(<App />, document.getElementById("root"));
Also see this working example on codesandbox.
To be honest I played around with the api of that library and actually it is unclear to me how this library is intended to be used. A pagination component should receive a list of items and then provide a render prop to render the current page with a slice of these items. It's a pagination that does not paginate. Basically it's only a button bar.
Just use var ReactUltimatePagination = require('react-ultimate-pagination'); after you've installed it with npm install react-ultimate-pagination --save

Categories