Issue #991
When building apps in SwiftUI or React, we often need to store values that change — like a counter, user input, or a list of items.
To do this:
useState.@State and @StateObject.But here’s something cool: …
Issue #979
When dealing with user input, such as in an autocomplete component, it’s common to implement debouncing to reduce the number of API calls and improve the user experience.
React Query’s useQuery hook makes it easy to manage the …
Issue #975
When building a React application, separating the logic and state management from the UI can make your code easier to manage, test, and reuse. This is where the view model pattern comes in handy. By using a custom hook as a view model, you …
Issue #971
When testing React components, dealing with tasks that happen at different times is super important to make sure your tests give reliable results. React Testing Library gives you two important tools for dealing with these situations: act …
Issue #969
Hapi.js, commonly referred to as Hapi, is an open-source, back-end web application framework for building and deploying web applications and APIs in Node.js
In Hapi.js, you can use the Boom module to create and return error responses in a …
Issue #968
Are you looking to grab images directly from your clipboard with a button click on your web page? The Async Clipboard API makes this quite easy and efficient. Let’s break it down into simpler steps:
The first …
Issue #966
The use of useCallback and useMemo in React hooks is an adaptation to address certain limitations inherent in the functional programming style adopted by React. In JavaScript, every entity, whether it’s a function, variable, or any …
Issue #953
Use debounce from lodash and useCallback to memoize debounce function
import React, { useCallback } from "react"
import debounce from …Issue #947
Sometimes Row Level Security is not enough and we want to do all logic server side, then we need a way for the server to get hold onto current user token.
From client, we can get session from supabase …
Issue #946
For security purposes, the auth schema is not exposed on the auto-generated API. We can make a profiles table in public namespace and mirror data from auth.users when user signs up.
I need id, username and raw_user_metadata so I will …
Issue #942
Expose supabase with createClient
useSupabase.ts
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env. …Issue #941
In this tutorial we will be creating a React app with Parcel 2 with Typescript and Tailwind
Install the following dependencies. Parcel supports TypeScript out of the box without any additional configuration.
Issue #936
From https://github.com/antonioerdeljac/next13-spotify
import { forwardRef } from "react";
import { twMerge } from "tailwind-merge"; …Issue #914
Use react-markdown to parse markdown content, react-syntax-highlighter to highlight code, and rehype-raw to parse raw html
import ReactMarkdown from …Issue #804
<img
src={user.avatarUrl}
onError={(e) => {
e.target.onerror = null;
e.target.src = "/images/default.png" …Issue #803
import React from 'react';
import videojs from 'video.js'
import 'video.js/dist/video-js.css';
export default class …Issue #751
Declare data/package.json to make it into node module
{
"name": "data",
"version": "0.1.0", …Issue #700
In index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', …Issue #699
Use term ZStack like in SwiftUI, we declare container as relative position. For now it uses only 2 items from props.children but can be tweaked to support mutiple
Issue #669
Specify params as array [year, id], not object {year, id}
const { year, id } = props
useEffect(() => {
const loadData = async () => { …Issue #665
Usually in header we have logo that takes user back to the home page
// index.js
import {
BrowserRouter as Router,
Switch,
Route, …Issue #664
Use moment-timezone https://momentjs.com/timezone/docs/
npm install moment-timezone
// public/index.html
<script …Issue #663
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import React from 'react';
import videojs from 'video.js'
export …Issue #662
Use spread operator
import React, { Component, useState, useEffect } from 'react';
const [state, setState] = useState({
message: …Issue #661
Use Bulma css
<input
class="input is-rounded"
type="text"
placeholder="Say something"
value={value} …Issue #661
Use Bulma css
<input
class="input is-rounded"
type="text"
placeholder="Say something"
value={value} …Issue #659
Use useLocation https://reacttraining.com/react-router/web/guides/scroll-restoration
import React, { useEffect } from 'react';
import { …Issue #658
Declare routes, use exact to match exact path as finding route is from top to bottom. For dynamic route, I find that we need to use render and pass the props manually.
Declare Router as the rooter with Header, Content and Footer. Inside …
Issue #657
Add library folder src/library
src
library
res.js
screens
Home
index.js
package.jsonDeclare package.json in …
Issue #655
Declare state and setState
export default function Showcase(props) {
const factory = props.factory
const [state, setState] = useState( …Issue #654
Use shelljs to execute shell commands, and fs to read and write. In public/index.html specify some placeholder and we will replace those in our script
Issue #654
A good landing page is one of the most crucial part of a successful launch. Recently I started creating landing pages for my apps, I was lazy that I ended creating a white label React app as a landing template and then write a script to …
Issue #653
Use https://github.com/biati-digital/glightbox
Configure css. Specify class='glightbox for html elements
<link rel="stylesheet" …Issue #652
Use https://github.com/michalsnik/aos
Add link to head
<head>
<link rel="stylesheet" …Issue #649
Check flag then define css
const Picture = (feature) => {
const shadowCss = feature.shadow ? css`
border-radius: 5px; …Issue #648
In a similar fashion to plain old javascript, note that href needs to have valid hash tag, like #features
<a
href='#features' …Issue #647
emotion can be used in framework agnostic or with React. To use with React, follow https://emotion.sh/docs/introduction#react
npm i @emotion/core …Issue #352
For a normal electron app created with npm init, we can use all features of ES6, but not the JSX syntax for React. We can use just Babel to transpile JSX, as used in IconGenerator
.babelrc
Issue #192
Read https://www.apollographql.com/docs/react/features/error-handling How to catch actual error https://github.com/apollographql/apollo-client/issues/4016 🤔
Issue #190
render() {
<Button color="inherit" onClick={this.onImagePress} >Image</Button>
<input ref="fileInput" type= …