Skip to content

Instantly share code, notes, and snippets.

View mledwards's full-sized avatar

Martin Edwards mledwards

View GitHub Profile
@mledwards
mledwards / hover-fade.scss
Last active October 19, 2018 10:58
SASS mixin for fading on hover of parent or child element
View hover-fade.scss
/*
* Adds fade on hover of an element or a specified child element
*/
@mixin hover-fade($child: '') {
@if $child != '' {
#{$child} {
transition: opacity 0.33s linear;
}
} @else {
transition: opacity 0.33s linear;
@mledwards
mledwards / react-text-area-to-paragraphs.js
Last active January 8, 2021 10:01
React component - Convert textarea new lines to paragraphs
View react-text-area-to-paragraphs.js
import React from "react";
// Normalise new lines from a textarea before outputting as JSX
export const Content = ({ content, className, lastParagraphMargin = "mb-0"}) => {
// Return null if there's no content passed to the component
if (!content || content.length === 0) {
return null;
}
@mledwards
mledwards / toggle-sticky-header-tailwind.js
Last active July 20, 2022 10:14
Tailwind toggle sticky header on scroll
View toggle-sticky-header-tailwind.js
// Need this to work out which direction the scroll is happening
let lastScroll = 0;
// Store header component
const header = document.querySelector("header");
// Element looks like this: <header class="transition-transform duration-300 fixed w-full">
// On page scroll
window.addEventListener("scroll", () => {
// Store current page scroll pixels from top