Skip to content

Instantly share code, notes, and snippets.

View erasmo-marin's full-sized avatar

Erasmo Marín erasmo-marin

  • Chile
View GitHub Profile
@erasmo-marin
erasmo-marin / website.json
Created August 27, 2017 18:59
Website structure using json
{
"title": "My cool website",
"sections": {
"home": {
"title": "Home",
"route": "/",
"children": {
"layout": {
"props": {
},
@erasmo-marin
erasmo-marin / component.jsx
Created August 25, 2017 17:35
Example component
import React from "react";
import withRegistry from "./witRegistry";
@withRegistry
class ExampleComponent extends React.PureComponent {
render() {
//in a real app, you should always check if the renderer function exists and
//provide a default rendering function if it makes sense
return this.props.registry.getRenderer("component-1")(this.props, null, null);
}
@erasmo-marin
erasmo-marin / customRender.jsx
Created August 25, 2017 17:21
Custom renders
import Registry from "./registry";
const registry = new Registry({
renderers: {
"component-1": (props, state, context) => (<div>{JSON.stringify(props)}</div>)
}
});
export default registry;
@erasmo-marin
erasmo-marin / switch.jsx
Last active August 27, 2017 13:30
Switch with registry container
import React from "react";
import withRegistry from "./withRegistry";
//here we are using decorators
//an alternative is using it just as a function (withRegistry(Switch))
@withRegistry
class Switch extends React.Component {
render () => {
let {registry, type, …rest} = this.props;
const Component = registry.getComponent(type);
@erasmo-marin
erasmo-marin / withRegistry.jsx
Last active August 27, 2017 13:28
withRegistry HOC
import React from 'react';
import PropTypes from "prop-types";
const getDisplayName = (WrappedComponent, defaultName="Unknown") => {
return WrappedComponent.displayName || WrappedComponent.name || defaultName;
}
const withRegistry = (Child) => {
class WithRegistry extends React.Component {
@erasmo-marin
erasmo-marin / ComponentsProvider.jsx
Created August 25, 2017 15:23
ComponentsProvider implementation
import React from "React";
import PropTypes "prop-types";
class ComponentsProvider extends React.Component {
static propTypes = {
registry: PropTypes.object.isRequired
};
static childContextTypes = {
@erasmo-marin
erasmo-marin / registry.js
Created August 25, 2017 14:52
Registry example
import Registry from "./registry";
//avoid to import component using named imports, instead import directly from the file to reduce bundle size
import Component1 from "./component1";
import Component2 from "./component2";
import Component3 from "./component3";
const registry = new Registry({
components: {
"component-1": Component1,
"component-2": Component2,
@erasmo-marin
erasmo-marin / switch.jsx
Created August 25, 2017 13:59
Conditionally load a component from a components registry
import React from "react";
const Switch = ({registry, type, …rest}) => {
const Component = registry.getComponent(type);
return <Component {…rest}/>;
}
@erasmo-marin
erasmo-marin / registry.jsx
Created August 25, 2017 13:55
Registry minimal implementation
import get from "lodash/get";
class Registry {
constructor(registry = {}) {
this._registry = registry;
}
//get a component by id, if not available we return null
getComponent = id => get(this._registry, `components.${id}`, null);
}
@erasmo-marin
erasmo-marin / switch3.jsx
Last active August 25, 2017 14:00
Conditionally load a component 3
import React from "react";
import { Component1, Component2, Component3 } from "./file";
const components = {
"component-1": Component1,
"component-2": Component2,
"component-3": Component3
}
const Switch = ({ type, …rest }) => {