Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scinos/eleventy-plugin-react-ssr
https://github.com/scinos/eleventy-plugin-react-ssr
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/scinos/eleventy-plugin-react-ssr
- Owner: scinos
- License: mit
- Created: 2022-05-11T03:33:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-09T23:31:04.000Z (about 1 year ago)
- Last Synced: 2024-10-01T14:48:19.690Z (3 months ago)
- Language: JavaScript
- Size: 926 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# eleventy-plugin-react-ssr
This plugin allows you to write your Eleventy content using JSX as a template language, and render it using React
server-side render.
## Installation
```shell
yarn add --dev eleventy-plugin-jsx
```
## Usage
### Enabling the plugin
The first step is to enable the plugin in your Eleventy config
```js
// .eleventy.js
const eleventyReactSSRPlugin = require('eleventy-plugin-react-ssr');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyReactSSRPlugin);
};
```
### Plugin configuration
This plugin uses Babel to transpile JSX files. It is possible to pass any Bable config as plugin configuration using the
property `babelConfig`. For example, you can provide your own Babel plugins:
```js
const eleventyReactSSRPlugin = require('eleventy-plugin-react-ssr');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyReactSSRPlugin, {
babelConfig: {
plugins: [['inline-react-svg', { svgo: false }]],
},
});
};
```
## Writing pages
Just use the extension `.jsx` for your page, and write it using JSX.
Pages are expected to have a default export with the main component (either Function Component or Class Component, both
will work):
```jsx
function MyPage() {
return
Hello world
;
}
export default MyPage;
```
### Defining page data
If you need to define page data (similar to a front matter in a Markdown page), use the static property `data`
```jsx
function MyPage() {
return
Hello world
;
}
MyPage.data = {
title: 'Hello world',
layout: 'main',
permalink: 'hello.html',
customData: {
foo: 'bar',
},
};
export default MyPage;
```
### Using page data
You may want to use the data provided by Eleventy in your page. This can be done using React Context and a hook:
```jsx
import EleventyContext from 'eleventy-plugin-react-ssr/context';
import { useContext } from 'react';
function MyPage() {
// Access to anything from the data cascade, including page data
// and Eleventy supplied data from https://www.11ty.dev/docs/data-eleventy-supplied/
const { title, customData, page } = useContext(EleventyContext);
return (
<>
{title}
URL: {page.ur}
>
);
}
MyPage.data = {
title: 'Hello world',
customData: {
foo: 'bar',
},
};
export default MyPage;
```
### Writing layouts
It is possible to write layouts using JSX too. However, I'll recommend to only use layouts if the content comes from a
diffrent template language (eg: you have content in Markdown that you'd like to render inside a JSX layout). If you want
to do "JSX in JSX" (content in JSX, layout in JSX as well), check the next section.
```markdown
// page.md
---
layout: layout/main.jsx
title: My page
---
My page is aweseome
```
```jsx
// _includes/layout/main.jsx
import EleventyContext from 'eleventy-plugin-react-ssr/context';
import { useContext } from 'react';
function MainLayout() {
const { content, title } = useContext(EleventyContext);
return (
<>
{title}
>
);
}
export default MainLayout;
```
### Page components
If you don't have content in other template languages (ie: all your pages are JSX), then I'd recommend to not use
layouts, and use components instead.
```jsx
// ./_includes/components/html-page.jsx
export function HTMLPage({ lang, children }) {
return (
{/* Link to styles, scripts, etc. */}
{children}
);
}
```
```jsx
// page.jsx
import { HTMLPage } from './_includes/components/html-page';
function MyPage() {
return (
Hello world
);
}
export default MyPage;
```
This way, the page will be JSX all the way to the end, and you can pass props to the page component.
If you really want to, you can use a JSX layout for a JSX page. It will work, but it will be a bit hacky as you need to
use `dangerouslySetInnerHTML` to render it, and use page data to simulate passing props.