Skip to content

Instantly share code, notes, and snippets.

@dartmax
dartmax / How to debug gatsby and reactjs with idea WebStorm with cross-env
Created November 23, 2021 13:21
How to debug gatsby and reactjs with idea WebStorm with cross-env
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "n/a",
"scripts": {
"serve": "gatsby develop -p 5000",
"dev": "cross-env node $NODE_DEBUG_OPTION ./node_modules/.bin/gatsby develop -p 5000",
}
}
const yargs = require('yargs')
const csv = require('csvtojson/v2')
const contentful = require('contentful-management')
const { config } = require('dotenv')
const axois = require('axios')
const { min } = require('lodash')
// keep script alive
setTimeout(() => {}, 99999999)
@dartmax
dartmax / Transition
Created December 15, 2020 14:22
Transition Effect from 'react-transition-group'
import React, {FC, Fragment, useEffect, useState} from 'react';
import { injectIntl } from 'react-intl';
import {
Container,
Row,
Col,
} from 'reactstrap';
import classNames from 'classnames';
@dartmax
dartmax / Add or update a query string parameter in React
Last active October 13, 2020 16:17
Add a query string parameter to the url if not present, or if it present, update the current value
export const updateQueryStringParameter = (uri, key, value) => {
const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');
const separator = uri.indexOf('?') !== -1 ? '&' : '?';
if (uri.match(re)) {
return uri.replace(re, `$1${key}=${value}$2`);
}
return `${uri + separator + key}=${value}`;
};
@dartmax
dartmax / CustomHook.txt
Last active September 18, 2020 10:20
Custom Hook for second rendering useEffect as componentDidUpdate without asinc
//Custom hook
import { useEffect, useRef } from 'react';
const useEffectSkipFirst = (fn, depValue) => {
const isFirstRun = useRef(true);
useEffect(() => {
if (!isFirstRun.current) fn();
@dartmax
dartmax / React Hook (Change heigth in next render)
Last active October 15, 2020 15:57
Parent width or height in React using Hooks
//parent component
const parent = ({}) => {
const [contentHeight, setContentHeight] = useState(null);
return (
<Fragment>
<Row className="mx-auto margin-top-15px max-width-991px d-flex">
<Col className="px-0">
<ECard
contentHeight={contentHeight}