https://github.com/sord-dev/page-builder-client
https://github.com/sord-dev/page-builder-client
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sord-dev/page-builder-client
- Owner: sord-dev
- Created: 2024-07-17T21:02:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-01T13:38:38.000Z (almost 2 years ago)
- Last Synced: 2025-02-11T15:51:52.314Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 891 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Client-Side Page Builder
A ReactJS page builder that uses an external component library.
## How we're rendering templates
Currently uses Base64 encoding to read template data from url params.
Then imports all components from a url library and renders them out. Only allows for very basic templates given the rendering function is not recourrisve.
```js
import React, { useState, useEffect } from 'react';
import * as library from "../../lib/component-lib" // library providing custom component library module (bundled using rollup)
function PageBuilder({ templateData, updateComponentIndex }) {
const [template, setTemplate] = useState(templateData || { components: [] });
useEffect(() => {
updateComponentIndex(Object.keys(library).filter(key => key !== 'default')); // indexing all exported components in the library to AppContext state
setTemplate(templateData);
}, [templateData]);
const renderComponents = () => {
if (!template || !template.components.length) {
return
Loading template...; // Display a placeholder
}
return template.components.map((component, index) => {
try {
const Component = library[component.type];
if (!Component) {
throw new Error(`Component ${component.type} not found`);
}
return ();
} catch (error) {
console.error(error);
return null;
}
});
};
return (
{/* Render loaded components */}
{renderComponents()}
);
}
export default PageBuilder;
```
## Approach Limitations
- Very large url parameters
- Cannot handle nested components
- Dependant on defaultProps property within react (to be depreciated)
# Backlog
- ~~catagorising components~~
- ~~adding multi-page support~~
- adding more components
- fleshing out appending components to the page
- integrate backend (link shortner)
- flesh out export functionality
- **fully zipped react websites**
- look into nextjs conversions