Skip to content

Instantly share code, notes, and snippets.

:octocat:

KirdesMF KirdesMF

:octocat:
Block or report user

Report or block KirdesMF

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View AppContext.tsx
import React, { useState } from 'react';
import useMatchMedia from 'hooks/useMatchMedia';
import { breakpoints } from 'Theme/breakpoints';
type ThemeStateType = 'light' | 'dark' | 'contrast';
export type MainContextType = {
theme: ThemeStateType;
setTheme: (value: ThemeStateType) => void;
medium: boolean;
@KirdesMF
KirdesMF / styled.js
Created May 23, 2020
Styled component separate file
View styled.js
const Container = styled.header`
position: fixed;
top: 0;
height: 10%;
width: 100%;
display: grid;
grid-template-areas: 'social . nav .';
grid-template-columns: 15% 1fr 1fr 15%;
@KirdesMF
KirdesMF / tsdoc.tsx
Created May 23, 2020
Example tsdoc vscode typescript react
View tsdoc.tsx
import React from 'react';
import styled from 'styled-components';
import { ColorsType } from 'Theme/colors';
import { icons, NameIconType } from './icons';
/**
* Define Props for Icon component
*/
type IconProps = {
/**
@KirdesMF
KirdesMF / ts.tsx
Last active May 23, 2020
Ts Helpers
View ts.tsx
/**============== Avoid doing things weird with never ===========================*/
type Exact<A, B> = A extends B ? (B extends A ? A : never) : never;
// This basically says that if and A extends B and B extends A then the types are identical,
// neither are a subset or superset of the other.
// So it should allow that type through.
// If they are not identical, then the type is never which prevents that type from being allowed.
// Now you just need to make your function generic, and enforce that argument to exactly the right type:
@KirdesMF
KirdesMF / Theme.tsx
Last active May 17, 2020
Theme Provider SC
View Theme.tsx
/// <reference types="styled-components" />
import 'styled-components';
import { DefaultTheme } from 'styled-components';
export type ColorsThemeType = {
home: string;
about: string;
works: string;
contact: string;
@KirdesMF
KirdesMF / useMatchMedia.tsx
Created May 13, 2020
useMatchMeadi Hooks
View useMatchMedia.tsx
import { useState, useEffect } from 'react';
const useMatchMedia = (mediaQuery: string) => {
const [isMatches, setIsMatches] = useState(
window.matchMedia(mediaQuery).matches
);
useEffect(() => {
const updateStateisMatches = (event: MediaQueryListEvent) =>
setIsMatches(event.matches);
@KirdesMF
KirdesMF / App.jsx
Last active Apr 28, 2020
example router
View App.jsx
import * as React from 'react';
import styled from 'styled-components';
import Routes from './Routes/Routes';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Nav from './components/Nav/Nav';
@KirdesMF
KirdesMF / checkForm.js
Created Apr 19, 2020
Helper / util to check value in a form
View checkForm.js
export const checkErrorsInput = (name, value) => {
let errors = {};
const options = {
isRequired: value.length === 0,
isInvalidName: value.length < 5,
isInvalidMessage: value.length < 15,
isInvalidMail: !/\S+@\S+\.\S+/.test(String(value).toLocaleLowerCase()),
isInvalidPhone: !/\b[\d]{10}\b/.test(value),
};
@KirdesMF
KirdesMF / useForm.jsx
Last active Apr 19, 2020
React Hooks useForm
View useForm.jsx
import { useState } from 'react';
import { checkErrorsInput, checkErrorsForm } from 'utils/checkForm';
const useForm = (
initState = {
errors: {},
values: {},
isSubmitted: false,
isFormValid: false,
}
You can’t perform that action at this time.