Skip to content

Instantly share code, notes, and snippets.

View isBatak's full-sized avatar

Ivica Batinić isBatak

View GitHub Profile
isBatak / CodeEditor.tsx
Last active May 20, 2022 16:13
How to create Live Code editor and Chakra UI styled props as a Markdown code meta!
View CodeEditor.tsx
export interface ICodeEditorProps {
children: ReactNode;
className?: string;
path?: string;
code?: string;
isLive?: boolean;
title?: string;
lang?: Language;
isBatak /
Last active May 8, 2021 13:33
project structure

UI Components

When adding UI components, you should be able to group them in two root domains:

  1. pages - page scope based components
  2. shared - components that are shared all across the app

Folder naming rules:

  1. kebab-case folder name indicates domain name
isBatak / Tabs.tsx
Created October 15, 2020 12:44
View Tabs.tsx
import React, { createContext, useState, useMemo, useContext, cloneElement, isValidElement, FC } from 'react';
import useConstant from '../../../hooks/useConstant';
type TabStateContext = [number, React.Dispatch<React.SetStateAction<number>>];
interface ITabsProps {
state?: TabStateContext;
isBatak / env.ts
Last active February 20, 2020 08:44
Next.js withDatx
View env.ts
// utils/env.ts
export const isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
export const isServer = !isBrowser;
isBatak / layout.js
Created March 21, 2018 21:15
Next.js - Layout component
View layout.js
import Link from 'next/link'
import Head from 'next/head'
export default class Layout extends React.Component {
componentDidMount() {
componentWillUnmount() {
isBatak / slick-filter-bug-fix.js
Last active October 19, 2015 18:23
Fixing filter bug in slick.js when using center mode.
View slick-filter-bug-fix.js
$(document).ready(function() {
// Product slider
var $sliderFilters = $('.js-products-slider-filter > li');
var $productsSliderNavigation = $('.js-products-slider-nav');
var $productsSliderPreview = $('.js-products-slider-preview');
function initSliders() {