# SiteOne React Snippets Write `s1-` in JavaScript React file and pick one of snippets below. Use Tab To fill in names conveniently. Proper function of these snippets assumes you are using: - flow - react >= 16.6.x - eslint config `@siteone/eslint-config` Have fun. ## 0.0.2 ### `s1-qc` GraphQL Query container ```javascript // @flow import React, { memo } from 'react' import PropTypes from 'prop-types' import { Query } from 'react-apollo' import gql from 'graphql-tag' import WhateverView from './Whatever' type WhateverContainerProps = { any: String, i: String, } const QUERY = gql` # Query here ` const WhateverContainer = memo(({ ...props }: WhateverContainerProps) => ( {({ data, error, loading }) => { if (error) return '💩 Oops!' if (loading) return 'Načítám...' return () }} )) export default WhateverContainer ``` ## 0.0.1 ### `s1-c` ```javascript // @flow import React, { Node } from 'react' import PropTypes from 'prop-types' import styles from './MyComponent.scss' type MyComponentProps = { children: Node } const MyComponent = ({children}: MyComponentProps) => {

{children}

} export default MyComponent ``` ### `s1-m` ```javascript // @flow import React, { memo, Node } from 'react' import PropTypes from 'prop-types' import styles from './MyComponent.scss' type MyComponentProps = { children?: Node } const MyComponent = memo(({children}: MyComponentProps) => {

{children}

}) export default MyComponent ``` ### `s1-l` ```javascript // @flow import React, { lazy, Suspense, Node } from 'react' import PropTypes from 'prop-types' const MyLazyComponent = lazy(() => import('./MyLazyComponent')) type MyComponentProps = { children?: Node } const MyComponent = ({children}: MyComponentProps) => { Načítám...}> {children} } export default MyComponent ```