react-emmet icon indicating copy to clipboard operation
react-emmet copied to clipboard

Add support for creating function / class components

Open BrunnerLivio opened this issue 2 years ago • 0 comments

## Description

I'd like to have a snippet where I can generate functional/class components.

Specification

Class Component
cc.<ComponentName>[props]

Should generate the following structure:

In JS:

class <ComponentName> extends React.Component {
  render() {
    return null;
  }
}

In TS:

type <ComponentName>Props = {
  [...props]
}

class <ComponentName> extends React.Component<<ComponentName>Props> {
  render() {
    return null;
  }
}
Functional Components
fc.<ComponentName>[props]

Should generate the following structure:

In JS:

const <ComponentName> = ({ [...props] }) => {
  return null;
}

In TS:

type <ComponentName>Props = {
  [...props]
}

const <ComponentName> = ({ [...props] }: <ComponentName>Props) => {
  return null;
}

Configuration options

"actual-react-emmet.componentStyle": 'function' | 'const'

Whether the component should be written using const or function, e.g.

// using `function` as option
function MyComponent() {}

// using `const` as option
const MyComponent = () => {}

"actual-react-emmet.componentPropsStyle": 'interface' | 'type' | 'inline'

Whether it should use an interface or type for the component props, e.g.

// using `interface` as option
interface MyComponentProps { ... }
function MyComponent({...}: MyComponentProps) {}

// using `type` as option
type MyComponentProps = { ... }
const MyComponent = ({...}: MyComponentProps) => {}

// using `inline` as option
function MyComponent({ name }: {name: string}) {}

Examples

// Command
fc.MyComponent[name]

// Result
const <ComponentName> = ({ name }) => {
  return null;
}

// Command
fc.Person[name: string; id: number; address?: { zip: number; street: string }]

// Result
type PersonProps = {
  name: string;
  id: number;
  address?: {
    zip: number;
    street: string;
  }
}

const Person = ({ name: string; id: number; address }): PersonProps) => {
  return null;
}

BrunnerLivio avatar Jan 28 '24 21:01 BrunnerLivio