Skip to content

Instantly share code, notes, and snippets.

Created March 14, 2016 13:27
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A way to dynamically specify React.js components
import React, { Component } from "react"
import OCFacetText from "./oc-facet-text"
import OCFacetNumber from "./oc-facet-number"
import OCFacetNumberRange from "./oc-facet-numberrange"
import OCFacetBoolean from "./oc-facet-boolean"
import OCFacetCheckbox from "./oc-facet-checkbox"
import OCFacetRadio from "./oc-facet-radio"
import OCFacetDate from "./oc-facet-date"
import OCFacetDateTime from "./oc-facet-datetime"
import OCFacetDateRange from "./oc-facet-daterange"
import OCFacetDateTimeRange from "./oc-facet-datetimerange"
import OCFacetSelect from "./oc-facet-select"
class OffCanvas extends Component {
constructor(props) {
componentDidMount() {
// Removed stuff that is not relevant
render() {
let facetMap = {
"text": OCFacetText,
"number": OCFacetNumber,
"numberrange": OCFacetNumberRange,
"boolean": OCFacetBoolean,
"checkbox": OCFacetCheckbox,
"radio": OCFacetRadio,
"date": OCFacetDate,
"datetime": OCFacetDateTime,
"daterange": OCFacetDateRange,
"datetimerange": OCFacetDateTimeRange,
"select": OCFacetSelect
facetComps = (f) {
var CompName = facetMap[f.type]
return <CompName key={}
{...f.options} />
return (
OffCanvas.propTypes = {
title: React.PropTypes.string,
helperText: React.PropTypes.string,
cancelText: React.PropTypes.string,
submitText: React.PropTypes.string
OffCanvas.defaultProps = {
title: "Filter",
cancelText: "Clear",
submitText: "Apply"
export {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment