# Live Templates

## Component boilerplate
Uses file name to generate component.

<img src="https://user-images.githubusercontent.com/881986/69436949-fdab1000-0d07-11ea-8944-174c74b44233.gif" width="500" />

Template text:
```jsx
import React, {Fragment} from 'react'
import PropTypes from 'prop-types'

function $componentName$ () {
  return (
    <Fragment>
      $1$
    </Fragment>
  )
}

$componentName$.propTypes = {
  loginId: PropTypes.string.isRequired
}

export default $componentName$

```
Edit Variables:
![image](https://user-images.githubusercontent.com/881986/69437275-980b5380-0d08-11ea-9282-6aa7b02a148c.png)

## useState
Writes out setter based on state name.

<img src="https://user-images.githubusercontent.com/881986/69437771-84142180-0d09-11ea-9223-9640f70c8889.gif" width="500" />

Template text:
```jsx
const [$NAME$, set$CAP_NAME$] = React.useState($DEFAULT$)
```

Edit Variables:
![image](https://user-images.githubusercontent.com/881986/69437906-c3427280-0d09-11ea-9a96-0ce21e83acb2.png)