Donald Pipowitch donaldpipowitch

React

index.tsx:

import React from 'react';
import styled from 'styled-components';
 
enum Area {
  header = 'header',

This is a very basic example which shows how you can create a simple ESLint rule with @ts-check support. This example features the rule and a test. The rule checks, if you pass an absolute URL to a history.push function or not.

If you want to use this rule in your ESLint configuration without publishing the rule there is a caveat. AFAIK you can't simply include the path to your rule in your .eslintrc.js (correct me if I'm wrong). You need to pass the directory of this rule to the CLI as --rulesdir "./path/to/rules" and if you use VS Code with the ESLint extension you need to set "eslint.options": { "rulePaths": ["./path/to/rules"] }, in your settings.json as well. Only then you can add the rule to your config:

module.exports = {
  // ...yourCurrentConfig,
  rules: {
    // ...yourCurrentConfig.rules,
 'some-rule': 'error'

	import React, { createContext, useContext, useMemo, FC } from 'react';
	import { useMedia } from 'use-media';

	enum Breakpoints {
	small = 'min-width: 768px',
	medium = 'min-width: 992px',
	large = 'min-width: 1200px'
	}

	type BreakpointsContextValue = {

	import {
	Directive,
	Input,
	Output,
	EventEmitter,
	ElementRef,
	OnDestroy
	} from '@angular/core';

	@Directive({

	this.http.get<Data1>(url1).pipe(
	mergeMap((data1) =>
	this.http.get<Data2>(url2).pipe(map((_data2) => data1))
	)
	);

	import { Injectable } from '@angular/core';
	import {
	HttpEvent,
	HttpInterceptor,
	HttpHandler,
	HttpRequest,
	HttpErrorResponse,
	HttpClient
	} from '@angular/common/http';
	import { Observable, throwError } from 'rxjs';

	import React, { createContext, useState, useContext, FC } from 'react';

	type ContextValue = [boolean, (value: boolean) => void] \| undefined;
	const FullwidthContext = createContext<ContextValue>(undefined);

	const defaultState = false;

	export const FullwidthProvider: FC = ({ children }) => {
	const state = useState(defaultState);
	return (

	import { useEffect, useRef } from 'react';

	function usePrevious<T>(value: T) {
	const ref = useRef<T>();
	useEffect(() => {
	ref.current = value;
	});
	return ref.current;
	}

	function useScrollBottom<T extends HTMLElement>(offset?: number) {
	const [atBottom, setAtBottom] = useState(false);
	const scrollEl = useRef<T>(null);

	useEffect(() => {
	const { current } = scrollEl;
	if (current) {
	// by default we take the clientHeight into account, so "bottom" begins as soon as the last
	// visible piece appears in the scrollable area
	const withOffset = offset === undefined ? current.clientHeight : offset;