Open
Description
## 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;
}
Metadata
Assignees
Labels
No labels
Activity