retagger

Experimental way to define components

Usage no npm install needed!

<script type="module">
  import retagger from 'https://cdn.skypack.dev/retagger';
</script>

README

Retagger

Wtf is going on.

Retagger can create any component with any className

License npm package npm downloads

npm install retagger
# or
yarn add retagger

Examples

import Retagger from 'retagger';

const Container = Retagger.div.Container;
// <div className="Container" {...restProps} />

function MyComponent() {
  return (
    // Accept any other props
    <Container role="presentation">
      <OtherComponent />
    </Container>
  );
}
import Retagger from 'retagger';

const Container = Retagger.div.Container.OtherClass.foo;
// <div className="Container OtherClass foo" {...restProps} />

function MyComponent() {
  return (
    <Container>
      <OtherComponent />
    </Container>
  );
}
import Retagger from 'retagger';

const classes = {
  container: '__foo',
};

const Container = Retagger.div[classes.container].OtherClass.foo;
// <div className="__foo OtherClass foo" {...restProps} />

function MyComponent() {
  return (
    <Container>
      <OtherComponent />
    </Container>
  );
}
import Retagger from 'retagger';

const Container = Retagger(YourComponent).Container.foo;
// YourComponent should accept className prop
// <YourComponent className="Container foo" {...restProps} />

function MyComponent() {
  return (
    <Container>
      <OtherComponent />
    </Container>
  );
}

See LICENSE for more information.