Static-ish React components

Basic usage

<span data-component="Button">
  Button Label
</span>

<span data-component="Button">
  <div class="sc-AxirZ bJCmFu"> // 💅!
    Button Label
  </div>
</span>

How does it work?

Instead of ReactDOM.render() rendering a single <App/> component, index.js renders a component inside each element that has a data‑component attribute.

Before rendering though, it passes the contents of the original element to the <Button/> component using a children prop.

import Button from './components/Button';
document.querySelectorAll('[data-component="Button"]').forEach(button => {
  ReactDOM.render(
    <Button children={button.innerHTML} />
  , button);
})

The <Button/> component can be defined like any other React component, but uses the dangerouslySetInnerHTML prop to set the component's children as the innerHTML string from the original element:

import React from 'react';
import styled from 'styled-components';

const Button = styled.div`
  padding: 12px 16px;
  border-radius: 4px;
  background: black;
  color: white;
  cursor: pointer;
`;

export default ({ children }) => (
  <Button
    dangerouslySetInnerHTML={{ __html: children }}
  />
)

And that's the basic concept. 🎉

The bundled React index.js file can be used in any non-React context, replacing standard HTML elements with React components.

<span data-component="Button">
  Button Label
</span>
<script src="react_bundle.js"></script>

Supported elements

This method works best for UI primitives like labels or buttons. However, as long as index.js knows what component to replace the specified element with, this method could theoretically work for any component.

Props

Props could be automatically passed by prepending the prop name with data- and specifying it on the original element.

document.querySelectorAll('[data-component="RebassButton"]').forEach(button => {
  const {component, ...attrs} = button.dataset;
  ReactDOM.render(
      <ThemeProvider theme={theme}>
          <RebassButton
              children={button.innerHTML}
              {...attrs}
          />
      </ThemeProvider>
  , button);
})

import React from 'react';
import { Button } from 'rebass';

export default ({ children, ...props }) => {
    return (
        <Button
            mb="8px"
            dangerouslySetInnerHTML={{ __html: children }}
            {...props}
        />
    )
}

Handlers

Click handlers can be preserved either by passing onclick functions through to the component or by forwarding class and id attributes.

Nesting components

Stateful Components

Callbacks