Skip to content

Upgrade to @enonic/react-components@6.1.0-A1 with React 19 support #513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pmi merged 7 commits into from
Jan 12, 2026
Merged

Upgrade to @enonic/react-components@6.1.0-A1 with React 19 support #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1181ad3
Initial plan
Copilot Dec 17, 2025
38b287f
Upgrade to @enonic/react-components with Next.js 16 and React 19 support
Copilot Dec 17, 2025
89b4c9d
Update vite version to @latest in documentation
Copilot Dec 17, 2025
1e9bcd6
Update the tutorial for react-components 6.1 and react 19
pmi Dec 18, 2025
d45ef9a
Use @enonic/react-components@6.1.0-A1 and remove local build cache
Copilot Dec 18, 2025
ff05992
Update the tutorial for react-components 6.1 and react 19
pmi Dec 19, 2025
7fee8be
Bump @enonic/react-components to 6.1.0
pmi Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions docs/macros.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ image::./factbox-macro.png[width=1028]

Make an interface for RestProps so you can use it in other components as needed:

.src/components/RestProps.tsx
.src/components/RestProps.d.ts
[source,TypeScript]
----
export interface RestProps {
Expand All @@ -102,10 +102,6 @@ import { RestProps } from './RestProps';
personID="paramValue"
...
/>

interface RestProps {
personID: string;
}
----

Import the interface and supply it to the Link.tsx, Image.tsx and Maxro.tsx components to make them aware of the new personID field:
Expand Down
12 changes: 10 additions & 2 deletions docs/react-app.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ With the sandbox running, open a new terminal tab/window and run the following c

[source,Terminal]
----
npm create vite@6.1.1 react-enonic -- --template react-ts
npm create vite@8.2.0 react-enonic -- --template react-ts
----

This will create a React app and place it in a folder called `react-enonic/`.
Expand All @@ -24,7 +24,7 @@ With the basic project files in place, you must add some handy npm modules as we
----
cd react-enonic

npm install --save react-router-dom sass @enonic/react-components@5.0.1 @enonic/js-utils
npm install --save react-router-dom sass @enonic/react-components @enonic/js-utils
----

== Configure
Expand Down Expand Up @@ -64,6 +64,14 @@ image::react-app.png[width=75%]
Although beautiful, the app doesn't do much yet and just shows the Vite+React splash screen.
Let's begin by adding a router and some custom styling:

. First, set the contents of `index.css` file to the following:
+
.index.css
[source,css]
----
include::{sourcedir}src/index.css[]
----
+
. Add a file called `App.sass` to the `/src` folder. We'll use it instead of the built-in `App.css`.
+
.src/App.sass
Expand Down
Loading