Skip to content

Instantly share code, notes, and snippets.

@negamaxi
negamaxi / conditional-jsx.jsx
Created December 6, 2017 08:08
Conditional JSX patterns
const value = 'text'
// - without else statement
// single-line
return (
<div>
{
value && <span>{value}</span>
}
@negamaxi
negamaxi / asyncTimeout.js
Created December 21, 2017 06:16
Async timeout
const asyncTimeout = (timeout) => new Promise(
resolve => setTimeout(resolve, timeout)
)
export default asyncTimeout
// 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
})
@negamaxi
negamaxi / 1. useComponentState.js
Last active April 15, 2022 15:03
Separate component logic from view using React Hooks
// 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);
@negamaxi
negamaxi / .flowconfig
Last active June 23, 2019 11:33
Create React App flow stubs
[options]
module.name_mapper.extension='module.css' -> 'CSSModule'
module.name_mapper.extension='svg' -> 'SVGModule'
module.system=haste
@negamaxi
negamaxi / example.js
Created June 29, 2019 11:13
Easy way to agregate eports from different files into a single object.
// 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 / i18nContext.tsx
Created July 13, 2020 09:55
React app i18n
export const i18nContext = React.createContext(null);
@negamaxi
negamaxi / settings.json
Last active December 23, 2020 07:49
VSCode settings for CRA projects
{
"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