JSFiddle - React, Tailwind, and code Playground

by deadlyicon

CoffeeScript

# React Shareable Components Patters

slice = [].slice

simpleComponent = (render) ->
  React.createClass
    render: ->
      render(@props, @props.children)

# Definition

@Typeahead = React.createClass
  getInitialState: ->
    results: ['wtf', 1,2,'panda', 3]
  render: ->
    root(@props,
      input(@props.input),
      results(@props.results, @state.results)
    )

root = simpleComponent (props, children) ->
  delete props.inputProps
  delete props.resultProps
  props.className = Classnames('Typeahead', props.className)
  React.DOM.div(props, children)

input = simpleComponent (props, children) ->
  component = props.component || React.DOM.input
  component(props, children)

results = (props, results) ->
  props ||= {}
  props.className = Classnames('results', props.className)

  children = results.map (r, index) ->
    result(props.result, r, index)
  React.DOM.div(props, children)

result = (props, result) ->
  props ||= {}
  component = props.component || React.DOM.div
  component(props, result)



# this is just a placeholder for this example
Classnames = (a,b) ->
  a+' '+b




# Usage

node = Typeahead
  className: 'page-search'
  input:
    className: 'form-element'
    autofocus: true
  results:
    className: 'col-3'
    result:
      className: 'page-search-result'


React.renderComponent(node, document.body)