How to use emotion for inline css in React

Issue #647 emotion can be used in framework agnostic or with React. To use with React, follow https://emotion.sh/docs/introduction#react npm i @emotion/core Note that you must have /** @jsx jsx */ at the top of the file, and the unused jsx in import is a directive for JSX to work properly // this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement /** @jsx jsx */ import { css, jsx } from '@emotion/core' const color = 'white' render( <div css={css` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; &:hover { color: ${color}; } `} > Hover to change color....

May 2, 2020 路 1 min 路 Khoa Pham

How to use React JSX with Babel in Electron

Issue #352 For a normal electron app created with npm init, we can use all features of ES6, but not the JSX syntax for React. We can use just Babel to transpile JSX, as used in IconGenerator .babelrc { "plugins": [ "transform-react-jsx-source" ], "presets": ["env", "react"] } And in package.json, call babel to transpile src to dist "main": "dist/main.js", "scripts": { "start": "npm run babel && electron .", "babel": "babel ....

August 12, 2019 路 1 min 路 Khoa Pham

How to catch error in ApolloClient

Issue #192 Read https://www.apollographql.com/docs/react/features/error-handling How to catch actual error https://github.com/apollographql/apollo-client/issues/4016 馃 import { Observable } from 'apollo-link' import ApolloClient from 'apollo-boost' import Token from 'library/models/Token' import TokenService from './TokenService' import { TokenRefreshException } from 'library/utils/Exception' const client = new ApolloClient({ uri: 'https://www.myapp.no/api/', request: async (operation) => { const token = await TokenService.loadToken() updateOperation(operation, token) }, onError: (error) => { console.log('ApolloClient error', error) if (isAuthError(error)) { return handleAuthError(error) } else { return error....

March 28, 2019 路 1 min 路 Khoa Pham

How to handle file picker in React

Issue #190 render() { <Button color="inherit" onClick={this.onImagePress} >Image</Button> <input ref="fileInput" type="file" id="myFile" multiple accept="image/*" style={{display: 'none'}} onChange={this.handleFiles}></input> } onImagePress = () => { const fileInput = this.refs.fileInput fileInput.click() } handleFiles = (e) => { e.persist() const file = e.target.files[0] } ...

March 25, 2019 路 1 min 路 Khoa Pham