A bad idea

readme.md

Nest

a simple higher order react component to create nested css trees. there's lots that this doesn't do, but if you have ever needed to create <div class=foo><div class=bar><ActualElement /></></> this will take care of doing that for you.

it does not understand css, it can't set multiple classes on a single element, it's very dumb for now.

Nest(classlist: string): Function returns a function Nested(ChildElement: ReactElement): ReactElement

where the classlist looks like 'a b c' and returns a function that behaves like

(child) => <div class="a">
  <div class="b">
    <div class="c">
      {child}
    </div>
  </div>
</div>

main.js

var Nest = (classlist) => {
  // classlist = 'foo bar baz'
  let classes = classlist.split(' ');
  classes.reverse();
  let nestReducer = (prev, current) => <div className={current}>{prev}</div>;

  return (el) => (props) => classes.reduce(nestReducer, el)
}

var Hello = React.createClass({
  render: function() {
    let E = Nest('foo bar baz')(<span>bye</span>); // the span will be blue
    return <div><E /></div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

style.css

.foo .bar .baz span {
  color: blue;
}

this is really only useful if you are trying to recreate some complexly nested div hierarchy but don't feel like actually writing out the topmost components. otherwise this is needlessly obtuse