Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Bayon Component GeneratorNew to Visual Studio Code? Get it now.
Bayon Component Generator

Bayon Component Generator

devjoaolopes

|
26 installs
| (1) | Free
Extension for generate components using Bayon Design System in React
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info


Bayon Logo

Component Generator

Helps in creating your React component, generating files and boilerplates for its development.

How to use

  • Install the extension.
  • In your explorer, right-click and select Bayon Generate Component
  • Enter the name of the component to be created in the input.

Alt Text

Files

Component React


import React from 'react';
import * as Styles from './NameComponent.styles'

export const NameComponent = () => {
    return (
        <Styles.Container>
          <div></div>
        </Styles.Container>
    );
};

Component Styled


import { styled } from '@bayon/commons';

export const Container = styled('div')(() => ({
  display: 'flex',
  boxSizing: 'border-box',
}));

Index exported


export { NameComponent } from './NameComponent';

Component Test with Jest


import React from 'react';
import { render, screen } from '@bayon/testing';

import { NameComponent } from './NameComponent';

describe('<NameComponent />', () => {
  it('should render component', () => {
    createComponent();
    expect(screen.getByText('')).toBeInTheDocument();
  });
});

const createComponent = (props = {}) => {
  const defaultProps = {
    ...props,
  };

  return render(<NameComponent {...defaultProps} />);
};

License

GPL-3.0 © Joao Victor Faustino Piga Lopes

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft