Skip to content

Instantly share code, notes, and snippets.

Avatar
✍️
Working on something exciting

Alexey Raspopov alexeyraspopov

✍️
Working on something exciting
View GitHub Profile
View CustomEvent.md

Предположим, у меня есть список айтемов, где у каждого, например, есть кнопка удаления. По нажатию на кнопку просто вызывается какая-то функция, которая работает с backend API.

function ListItem({ data }) {
  return (
    <li className="list-item">
      {/* ... */}
      <button
View request.js
/* @flow */
/**
* @example Simple GET request
* let users = await request('/api/users');
*
* @example Cancellable GET request
* let [result, abort] = request('/api/users', { cancellable: true });
*
* @example Simple POST request
* let task = await request('/api/tasks', {
View LoginPage.js
import * as React from 'react';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import useAsyncCallback from './useAsyncCallback';
export default function LoginPage() {
let history = useHistory();
return (
<article>
{/* какой-то контент, всё что угодно на странице логина */}
View Expansion.md

Представим компонент, написанный какое-то время назад, используется в приложении, работает без проблем

function MyComponent({ input }) {
  let [something, setSomething] = useState();
  let data = useSomeFetchLibrary(input);
  return (
    <section>
      <ContentA input={something} />
      <ContentB input={data} />
@alexeyraspopov
alexeyraspopov / setupProxy.js
Last active May 5, 2020
Basic proxy setup for create-react-app to work with remote backend
View setupProxy.js
let proxy = require('http-proxy-middleware');
module.exports = app => {
let backend = proxy({
target: process.env.DATAROBOT_ENDPOINT,
changeOrigin: true,
});
let socket = proxy('/socket.io-queue', {
target: process.env.DATAROBOT_ENDPOINT,
changeOrigin: true,
View aspect-ratio-box.css
/* source: https://css-tricks.com/aspect-ratio-boxes/ */
.aspect-ratio-box {
position: relative;
}
.aspect-ratio-box::before {
content: '';
float: left;
padding-top: calc(100% / (var(--aspect-ratio))); /* --aspect-ratio: 16 / 9 */
}
.aspect-ratio-box::after {
View DataTable.js
let DataContext = React.createContext();
function DataTable({ children }) {
return <section className="data-table">{children}</section>;
}
function DataTableHead({ children }) {
return (
<header className="data-table-head">
<div className="data-table-row">{children}</div>
View useTransitionState.js
function useTransitionState(ref) {
let [pending, setPending] = useState(false);
useLayoutEffect(() => {
let target = ref.current;
let handler = {
handleEvent(event) {
setPending(event.type === 'transitionstart');
}
}
target.addEventListener('transitionstart', handler);
View debounce.js
/**
* @example
* let refetch = debounce((params) => makeRequest('/api', params));
* let prA = refetch(paramsA);
* let prB = refetch(paramsB);
* let prC = refetch(paramsC);
* let prD = refetch(paramsD);
* (prA === prB === prC === prD)
* awaits the last promise
*/
You can’t perform that action at this time.