Skip to content

Instantly share code, notes, and snippets.

Avatar
🟨
getting things done 💪🏻

Stefan Natter natterstefan

🟨
getting things done 💪🏻
View GitHub Profile
@natterstefan
natterstefan / HTMLToReact.tsx
Last active Jul 25, 2022
html-react-parser | TypeScript solution
View HTMLToReact.tsx
/**
* Works in Next.js 10.x
*/
import React from 'react'
import parse, {
domToReact,
attributesToProps,
Element,
HTMLReactParserOptions,
} from 'html-react-parser'
@natterstefan
natterstefan / backup.sh
Created May 1, 2019
Raspberry Pi | Backup and Sync Pi-hole and UniFi data from a Raspberry Pi to Google Drive
View backup.sh
#!/bin/bash
# create backup folders (if they do not exist yet)
mkdir -p ~/backups
mkdir -p ~/backups/unifi
mkdir -p ~/backups/pihole
# backup pi-hole
(cd ~/backups/pihole && pihole -a teleporter)
@natterstefan
natterstefan / README.md
Created Feb 18, 2020
Jest | Mock useState
View README.md

Jest - mock useState

When using import React, { useState } from 'react' in your components, this is how you can mock useState with jest.

@natterstefan
natterstefan / README.md
Last active May 3, 2022
VSCode | Debug tests in Create-React-App (all or single file)
View README.md

VSCode | Debug tests in Create-React-App (all or single file)

Add launch.json into the .vscode folder.

image

Now, enter the Debug view. Either add debugger into one of the tests or add breakpoints, before you execute one of the scripts.

image

@natterstefan
natterstefan / README.md
Last active May 1, 2022
Storybook | Tailwind in Next.js App with Webpack@5
View README.md

Storybook | Tailwind in Next.js App with Webpack@5

Installation

# install storybook dependencies
yarn add @storybook/addon-actions @storybook/addon-essentials @storybook/react -D
yarn add @storybook/addon-postcss@latest -D

# install webpack5 dependency
@natterstefan
natterstefan / jdl-app.package.json
Created Apr 21, 2022
JDL | Packages (2022-04-21)
View jdl-app.package.json
{
"dependencies": {
"@apollo/client": "3.5.8",
"@headlessui/react": "1.4.3",
"classnames": "2.3.1",
"conditional-wrap": "1.0.2",
"date-fns": "2.28.0",
"ellipsize": "0.5.1",
"icomoon-react": "2.0.19",
"lodash": "4.17.21",
@natterstefan
natterstefan / README.md
Last active Nov 29, 2021
Typescript | Infere Types from PropTypes
View README.md

Infer Types from PropTypes

Result

image

image

Limitations

@natterstefan
natterstefan / README.md
Last active Oct 29, 2021
EditorJS | Inline-Tool-Link (Custom)
View README.md

Editor.js - Custom Inline Tool "Link"

This is our custom implementation of the Inline Tool "Link" with a target and title attribute.

alt

--> used and tested with @editorjs/editorjs@2.17.0

Related Issues

@natterstefan
natterstefan / .eslintrc.json
Last active Sep 20, 2021
.eslintrc Example
View .eslintrc.json
{
"extends": "airbnb",
"parser": "babel-eslint",
"env": {
"browser": false,
"node": true,
"es6": true,
"mocha": false
},
"parserOptions": {