Skip to content

Instantly share code, notes, and snippets.

View anubra266's full-sized avatar
💥
Playing vscode...

Abraham anubra266

💥
Playing vscode...
View GitHub Profile
@esamattis
esamattis / page.tsx
Created May 17, 2022 11:21
Type inference for Remix loaders
import { DataFunctionArgs } from "@remix-run/node";
export async function loader({ request }: DataFunctionArgs) {
const user = getUser(request);
return typedJson({
email: user.email,
});
}
@muthhukumar
muthhukumar / chakra-ui-editable-textarea.tsx
Last active July 23, 2021 14:31
Chakra-ui editable textarea
import * as React from 'react'
import {
chakra,
forwardRef,
omitThemingProps,
StylesProvider,
SystemStyleObject,
ThemingProps,
useMultiStyleConfig,
useStyles,
@TheThirdRace
TheThirdRace / Button.ts
Last active April 7, 2021 20:54
A utility helper to add the same functionality as `useStyleConfig`, but within the theme itself
//
// theme/Button.ts
//
import { ComponentSingleStyleConfig, SystemStyleObject, ThemeComponentProps } from '@chakra-ui/react'
export const Button: ComponentSingleStyleConfig = {
baseStyle: {},
variants: {
ghostLight: (props: ThemeComponentProps): SystemStyleObject => getStyleConfig({
@TheThirdRace
TheThirdRace / Image.tsx
Last active February 6, 2024 15:20
Image component: merge Chakra-ui `2.8.0` with NextJs `13.4.13` and remove most pain points
/**
* # `<Image>`
*
* This component is a merge between `next/image` and `Chakra-ui`.
* - last updated on 2023-08-08 with `next/image` 13.4.13 and `chakra-ui/react` 2.8.0
* - https://github.com/vercel/next.js/blob/v13.4.13/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/commits/canary/packages/next/src/client/image-component.tsx
* - https://github.com/vercel/next.js/compare/v13.4.4...canary
*
@goldhand
goldhand / parseHtmlStyles.js
Last active March 18, 2023 16:28
Parse html style string for a react component
/**
* @function parseStyles
* Parses a string of inline styles into a javascript object with casing for react
*
* @param {string} styles
* @returns {Object}
*/
const parseStyles = styles => styles
.split(';')
.filter(style => style.split(':')[0] && style.split(':')[1])
@tonysneed
tonysneed / vs-code-ts-version.md
Created October 23, 2016 07:09
Use Specific Version of TypeScript with VS Code

NOTE: These steps are only required if you want to use a version of TypeScript that is not the same as the version that is bundled with Visual Studio Code.

  • Install the latest version of TypeScript

    npm install -g typescript@version
    
  • Configure VS Code to use installed version of TypeScript by opening Preferences, User Settings.

@derhuerst
derhuerst / output.js
Created May 10, 2016 10:22
how fetch a GitHub user's stars
[
{
owner: 'bcoe',
repo: 'top-npm-users',
description: ':star: Generate a list of top npm users by based on monthly downloads.',
language: 'JavaScript',
isFork: false,
stargazers: 27,
watchers: 27
}
@danieliser
danieliser / es5.js
Last active July 25, 2024 20:25
Convert Hex Color to rgba with opacity
/**
* ECMA2015
*/
function convertHex(hexCode, opacity = 1){
var hex = hexCode.replace('#', '');
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}