Skip to content

Instantly share code, notes, and snippets.

View mikeyamadeo's full-sized avatar

Pixel mikeyamadeo

View GitHub Profile
@mikeyamadeo
mikeyamadeo / dynamic_component_rendering.md
Last active September 4, 2022 02:43
Different approaches to dynamically rendering components with JSX

###Intro I wanted to use a facade pattern to provide a simple api for rendering job information in different forms using a Job component that received two props:

  • the job data
  • how to render the job
import React from 'react'
import Job from 'JobComponent'

Photo/style.css

/* block */
.Photo {}

/* element */
.Photo__img {}

/* modifier */
.Photo--large {}
import { ___, X } from 'react-ditto'
import Txt from 'react-txt'
import Btn from 'App/shared/atm.Btn'
import Input from 'App/shared/atm.Input'
const SearchUI = ({inputVal, onInputUpdate, onSearch}) =>
<X x p>
<___ mr1>
<Txt tag='label' color='secondary'>Search</Txt>
<Input value={inputVal} onChange={onInputUpdate} />
// src/App/style/settings
export const colors = {
primary: 'red'
}
// post-css-plugins/settings-from-js.js
var postcss = require('postcss')
var settings = require('./src/App/style/settings')
module.exports = postcss.plugin('settings-from-js', function (opts) {
import { baseFontSize } from ‘./settings.js’
export const pxToEm = (px) =>
`${px / baseFontSize}em`
* {
animation: spin 10s infinite;
}
span {
font-size: .5em;
animation: spin .25s infinite;
}
@keyframes spin {
.body > :last-child {
  margin-bottom: 0;
}

.theme-red .txt {
  color: red;
}
.thing {
  color: red;
  padding-top: var(--spacing-default);
}

.pt {
 padding-top: var(--spacing-tiny) !important;
}
import { StyleSheet, css } from 'aphrodite'
import { colors } from 'App/style/settings'
import Media from 'App/shared/obj.Media'
const PokemonListing = ({name, num, loc, imgSrc}) =>
<div className={css(styles.root)}>
<Media img={imgSrc}>
<h2>{name}</h2> <h4>#{num}</h4>
<Media
import { colors, baseFontSize } from 'App/style/settings'
const Txt = ({
color = 'text',
size = baseFontSize,
tag = 'span',
children,
...rest
}) => {
const Tag = tag