DEV Community: Ernesto Jara Olveda

Create Custom HTML Components React

Ernesto Jara Olveda — Mon, 14 Mar 2022 03:11:35 +0000

This generic component is useful if you are creating your own ui library and you want your components accept not only the props you want them to have, but also all the native props. for example you want your Button component to accept and auto complete the eventHandlers, aria-props and stuff w/out specifying'em.

import React from "react";

const defaultProps = {
  tag: "section",
};

type Props = React.HTMLAttributes<HTMLElement> & typeof defaultProps & {
    tag: React.ElementType;
    className: string;
    cssModule?: CSSModule;
}

const Html: React.FC<Props> = (props) => {
    const { tag: Tag, ...attributes } = props;

    return <Tag {...attributes} className={classes} />;
};

Section.defaultProps = defaultProps;

export default Html;

now when you create your curstom button you'll see it will accept the props you set and also the "native props"

<Html tag="button" onClick={e=>{e.preventDefault();}}/>

Create React Portals Typed Safe

Ernesto Jara Olveda — Mon, 14 Mar 2022 02:53:43 +0000

today I will show you how to create a react portals with typescript the Propper way.

import ReactDOM from "react-dom";
import * as React from "react";

const defaultProps = {
  tag: "section",
  create:false,
  className: "",
};

type Props = React.HTMLAttributes<HTMLElement> & typeof defaultProps &{
  /**
   * the html tag you would like to use as wrapper.
   * 
   * @default "section"
   */
    tag: keyof JSX.IntrinsicElements;
    id: string;
    /**
     * if true a new node/htmlTag will be created, else the html tag already exists.
     * @default false.
     */
    create: boolean;
}

const Portal: React.FC<Props> = props => {
  const { tag, create, id, className, children, ...rest } = props;
    const el = create ? document.createElement(tag) : document.getElementById(id);

    const wrapper = React.useRef<HTMLElement>(el);


        React.useEffect(() => {
        const current = wrapper.current as HTMLElement;
        if (!current) return;

            current.setAttribute("id", id);
            current.setAttribute("class", className);

            type K =  keyof typeof rest;

            Object.keys(rest).forEach(key => {
              const val = rest[key as K] as K
                current.setAttribute(key, val);
            });

            document.body.appendChild(current);


        return () => {
            if (create) {
                document.body.removeChild(current);
            }
        };
    }, [wrapper,id, create, className, rest]);

      if (!wrapper.current) {
        return <>{null}</>;
    }

    return ReactDOM.createPortal(children, wrapper.current);
};

export default Portal;

Make your JavaScript Typed Safe

Ernesto Jara Olveda — Mon, 10 Jan 2022 09:10:28 +0000

We are going to make our JavaScript files typed safe, that your JS files will feel like if they were typescript. this can be done for any JavaScript project, but we will focus on react.

I have a create-react-app project. let's add a jsconfig.json file in the root of the project

a jsconfig.json file is a tsconfig.json with the allowJs and the checkJs as true.

{
  "compilerOptions": {
    "incremental": true,
    "target": "es2020",
    "composite": true,
    "module": "ESNext",
    "lib": [
      "DOM",
      "esnext",
      "ES2015",
      "ES2016",
      "ES2017",
      "ES2018",
      "ES2019"
    ],
    "allowJs": true,
    "checkJs": true,
    "jsx": "preserve",
    "declaration": true,
    "reactNamespace": "React",
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "typings",
    "rootDir": ".",
    "tsBuildInfoFile": "./tsBuildInfoFile.json",
    "isolatedModules": true,
    "moduleResolution": "node",
    "baseUrl": "./node_modules",
    "importHelpers": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "assumeChangesOnlyAffectDirectDependencies": true,
    "allowUnusedLabels": false,
    "paths": {
      "*": [
        "./*",
        "./@types/*"
      ]
    },
    "types": [
      "node",
      "react"
    ],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
    "traceResolution": true,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true,
    "pretty": true
  },
  "typeAcquisition": {
    "enable": true
  },
  "exclude": [
    "node_modules",
  ],
  "include": [
    "src",
    "type"
  ]
}

Next you need to create a folder call .vscode and add a file inside it call settings.json

{
    "javascript.suggestionActions.enabled": true,
  "javascript.inlayHints.parameterNames": "all",
  "javascript.inlayHints.variableTypes.enabled": true,
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.autoClosingTags": true,
  "javascript.format.enable": true,
  "javascript.format.insertSpaceAfterCommaDelimiter": true,
  "javascript.format.insertSpaceAfterConstructor": true,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
  "javascript.format.semicolons": "insert",
  "javascript.format.quoteStyle": "double",
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
  "javascript.preferences.importModuleSpecifier": "shortest",
  "javascript.preferences.importModuleSpecifierEnding": "auto",
  "javascript.preferences.jsxAttributeCompletionStyle": "auto",
  "javascript.preferences.quoteStyle": "double",
  "javascript.preferences.useAliasesForRenames": true,
  "javascript.referencesCodeLens.enabled": true,
  "javascript.suggest.completeJSDocs": true,
}