How to use @teleporthq/teleport-component-generator-react - 7 common examples

export const createReactGenerator = (): ComponentGenerator => {
  const reactGenerator = createReactComponentGenerator('StyledJSX')
  reactGenerator.addMapping(nextMapping as Mapping)
  return reactGenerator
}

const createReactProjectGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules)
  reactComponentGenerator.addMapping(ReactProjectMapping as Mapping)

  const reactPagesGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules, {
    plugins: [headConfigPlugin],
    mappings: [ReactProjectMapping as Mapping],
  })

  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(reactAppRoutingPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['src', 'components'],

const initGenerator = (options: ProjectGeneratorOptions): ComponentGenerator => {
  const reactGenerator = createReactComponentGenerator({
    variation: 'StyledJSX',
  })

  reactGenerator.addMapping(nextMapping as Mapping)
  if (options.customMapping) {
    reactGenerator.addMapping(options.customMapping)
  }

  return reactGenerator
}

const createReactProjectGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules)
  reactComponentGenerator.addMapping(ReactProjectMapping as Mapping)

  const reactPagesGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules, {
    plugins: [headConfigPlugin],
    mappings: [ReactProjectMapping as Mapping],
  })

  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(reactAppRoutingPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({

private async generateComponent() {
    let generator = createReactComponentGenerator(this.selectedCSSFlavour)
    if (this.selectedFramework === 'vue') {
      generator = createVueComponentGenerator()
    }
    if (JSON.parse(this.jsonEditor.getCode())) {
      const uidl = JSON.parse(this.jsonEditor.getCode())
      const result = await generator.generateComponent(uidl)
      this.javascriptEditor.updateCode(result.files[0].content.trim())
      if (result.files[1]) {
        this.showCssFile = true
        this.cssEditor.updateCode(result.files[1].content.trim())
      }
    }
  }

const createSlidesGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules)

  const exportComponentsGenerator = createComponentGenerator()
  exportComponentsGenerator.addPlugin(createExportComponentsPlugin)
  exportComponentsGenerator.addPostProcessor(prettierJS)

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['src', 'slides'],
      options: {
        exportAllComponents: exportComponentsGenerator,
      },
    },
    static: {
      prefix: '',
      path: ['assets'],

export const createComponentGenerator = (): ComponentGenerator => {
  const reactGenerator = createReactComponentGenerator('CSSModules')
  reactGenerator.addMapping(reactProjectMapping as Mapping)
  return reactGenerator
}