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.

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