vulcan-reusability-registerComponent.jsx

// Package 1 - "my-basic-ui"
const MyBasicButton = ({onClick, children}) => (
  <button onClick={onClick}>
    {children}
  </button>
)
// Tell other packages they can use your component
// under the name "Button"
registerComponent({
  name: 'Button',
  component: MyBasicButton
})

// Package 2 - "my-better-ui"
// We replace the Button component to improve it
const MyStyledButton = ({onClick, children}) => (
  <button className="btn" onClick={onClick}>
    {children}
  </button>
)
replaceComponent({
  name:'Button',
  component: MyStyledButton
})

// Package 3 - "my-app"
// Example usage. Thanks to registration, we can change the Button style 
// without touching this code at all
const MyInterface = () => (
  <Components.Button onClick={() => console.log('click')}>
    Click Me!
  </Components.Button>
)