An Atom plugin that turns shorthand text into code that is commonly used in React & React Native development. It also contains a few general-purpose JavaScript snippets as well. Almost every snippet in this package uses ES6 or higher syntax.
Latest snippet count by category is as follows:
- React Import: 4
- React Component: 5
- React Lifecycle: 7
- React Hooks: 1
- React Props: 2
- React Native: 28
- General-purpose JavaScript: 6
- Total: 73
I would greatly appreciate any suggestions for snippets that aren't yet available for this package, or if any naming conventions appear odd to anyone. My goal is for this package to become a powerful & effective tool for web/mobile application developers.
After typing the snippet, pressing 'Enter' for Windows users and 'Return' for Macintosh users will write the code to the file. Alternatively, users can also press 'Tab' instead.
---- indicates that a user will be able to enter any text they'd like once the snippet has written the desired code in the file.
- eimr:
import ---- from 'react'; - enimr:
import { ---- } from 'react' - imr:
import React from 'react'; - imrn:
import React, { ---- } from 'react';
- rcc:
const ---- = React.createClass({ ... }); - rcerc:
class ---- extends React.Component { ... } - rcec:
class ---- extends Component { ... } - rfc:
const ---- = (----) => { ... } - rfcf:
const ---- = function(----) { ... }
- rcon:
creates a constructor - rcons:
creates a constructor with an empty state object - rcmd:
componentDidMount() { ---- } - rcdu:
componentDidUpdate(----) { ---- } - rcwu:
componentWillUnmount() { ---- } - rcwm:
UNSAFE_componentWillMount() { ---- } - rcwrp:
UNSAFE_componentWillReceiveProps() { ---- }
- rhs:
const [----, ----] = useState(----); - rhr:
const [----, ----] = useReducer(----, { ---- }); - rhe:
useEffect(() => { ---- }, ----); - rccont:
const ---- = React.createContext({ ---- }); - rhc:
const ---- = useContext(----); - rhref:
const ---- = useRef(----);
- eimrn:
import ---- from 'react-native'; - nimrn:
import { ---- } from 'react-native'; - rncss:
const styles = StyleSheet.create({ ---- }); - rnnnav:
navigation.navigate('----'); - rnnpush:
navigation.push('----'); - rnngb:
navigation.goBack(); - rnnpop:
navigation.pop(----); - rnnptt:
navigation.popToTop(); - rnnrep:
navigation.replace(----); - rnnjt:
navigation.jumpTo('----'); - rnnod:
navigation.openDrawer(); - rnncd:
navigation.closeDrawer(); - rnntd:
navigation.toggleDrawer(); - rnv:
<View ---- >----</View> - rnvsc:
<View ---- /> - rnvt:
<View ---- ><Text ---- >----</Text></View> - rnt:
<Text ---- >----</Text> - rnimg:
<Image source={----} ---- /> - rnti:
<TextInput value={----} onChangeText={----} onEndEditing={----} ---- /> - rnsv:
<ScrollView ---- >----</ScrollView> - rnsvt:
<ScrollView ---- ><Text ---- >----</Text></ScrollView> - rnbtn:
<Button title='----' onPress={----} ---- /> - rnto:
<TouchableOpacity ---- >----</TouchableOpacity> - rnpick:
<Picker selectedValue={----} onValueChange={----} ---- >----</Picker> - rnpitem:
<Picker.Item label='----' value={----} /> - rnsw:
<Switch value={----} onValueChange={----} ---- /> - rnfl:
<FlatList keyExtractor={----} data={----} renderItem={----} ---- /> - rnsl:
<SectionList sections={----} keyExtractor={----} renderItem={----} renderSectionHeader={----} ---- />
- eim:
import ---- from '----'; - enim:
import { ---- } from '----'; - tcb:
try { ----} catch (----) { ---- } - tcfb:
try { ---- } catch (----) { ---- } finally { ---- } - aolarr:
(----) => ---- - olarr:
const ---- = (----) => ---- - volarr:
var ---- = (----) => ---- - lolarr:
let ---- = (----) => ---- - arr:
const ---- = (----) => { ---- } - varr:
var ---- = (----) => { ---- } - larr:
let ---- = (----) => { ---- } - afunc:
function(----) { ---- } - func:
const ---- = function(----) { ---- } - vfunc:
var ---- = function(----) { ---- } - lfunc:
let ---- = function(----) { ---- } - destr:
const { ---- } = ----; - vdestr:
var { ---- } = ----; - ldestr:
let { ---- } = ----; - log:
console.log(----); - logt:
console.log('----'); - logm:
console.log('----', ----); - exdef:
export default ----; - modexp:
module.exports = ----;