Skip to content

Instantly share code, notes, and snippets.

Avatar

Максим Ильин negamaxi

View GitHub Profile
@negamaxi
negamaxi / settings.json
Last active Dec 23, 2020
VSCode settings for CRA projects
View settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// ^ Prettier will format files on save.
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// ^ ESLint will fix possible issues on save.
// "javascript.validate.enable": false
View i18nContext.tsx
export const i18nContext = React.createContext(null);
@negamaxi
negamaxi / example.js
Created Jun 29, 2019
Easy way to agregate eports from different files into a single object.
View example.js
// Assuming you have a group of modules described within individual files:
// - group/module1.js
// - group/module2.js
// - group/module3.js
// ...where each module*.js file has a corresponding named export:
// - group/module1.js
@negamaxi
negamaxi / .flowconfig
Last active Jun 23, 2019
Create React App flow stubs
View .flowconfig
[options]
module.name_mapper.extension='module.css' -> 'CSSModule'
module.name_mapper.extension='svg' -> 'SVGModule'
module.system=haste
@negamaxi
negamaxi / 1. useComponentState.js
Last active Dec 12, 2021
Separate component logic from view using React Hooks
View 1. useComponentState.js
// Outside props goes here first to be transformed according to Component's logic
export const useComponentState = props => {
const { disabled } = props;
const [loggedIn, setLoggedIn] = React.useState(initialLoggedIn);
const onLogInButtonClick = () => {
if (!disabled) {
setLoggedIn(true);
View simple-react-form-controlled-external.jsx
// External state example (Redux e.g)
class SimplerReactForm extends React.Component {
handleInputChange = (e) => {
const { name, value } = e.target
this.props.onChange({
...this.props.values,
[name]: value
})
View asyncTimeout.js
const asyncTimeout = (timeout) => new Promise(
resolve => setTimeout(resolve, timeout)
)
export default asyncTimeout
@negamaxi
negamaxi / conditional-jsx.jsx
Created Dec 6, 2017
Conditional JSX patterns
View conditional-jsx.jsx
const value = 'text'
// - without else statement
// single-line
return (
<div>
{
value && <span>{value}</span>
}