This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { hookstate, useHookstate } from '@hookstate/core'; | |
const globalState = hookstate(0); | |
setInterval(() => globalState.set(p => p + 1), 3000) | |
export const ExampleComponent = () => { | |
const state = useHookstate(globalState); | |
return <> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Dialog } from '@headlessui/react'; | |
const ModalDialog = ({ isOpen, setIsOpen }) => { | |
return ( | |
<Dialog open={isOpen} onClose={() => setIsOpen(false)}> | |
<div className="flex items-center justify-center min-h-screen"> | |
<Dialog.Overlay className="fixed inset-0 bg-black opacity-30" /> | |
<div className="relative bg-white rounded max-w-sm mx-auto p-8"> | |
<Dialog.Title className="text-xl">Title of dialog</Dialog.Title> | |
<Dialog.Description> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Returns a stateful value, and a function to update it. | |
* | |
* @version 16.8.0 | |
* @see https://reactjs.org/docs/hooks-reference.html#usestate | |
*/ | |
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; | |
// convenience overload when first argument is omitted | |
/** | |
* Returns a stateful value, and a function to update it. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from "react"; | |
const Controlled = () => { | |
const [inputText, setInputText] = useState(""); | |
const handleSubmit = (e) => { | |
e.preventDefault(); | |
console.log(inputText); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useRef } from "react"; | |
const Uncontrolled = () => { | |
const inputRef = useRef(null); | |
const handleSubmit = (e) => { | |
e.preventDefault(); | |
console.log(inputRef.current.value); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createTheme } from '@mui/material/styles'; | |
const theme = createTheme({ | |
status: { | |
danger: '#e53e3e', | |
}, | |
palette: { | |
primary: { | |
main: '#0971f1', | |
darker: '#053e85', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const theme = createTheme({ | |
components: { | |
MuiButton: { | |
variants: [ | |
{ | |
props: { variant: 'dashed' }, | |
style: { | |
textTransform: 'none', | |
border: `2px dashed grey${blue[500]}`, | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
import TrendingUpIcon from '@mui/icons-material/TrendingUp'; | |
import { Box } from '@mui/system'; | |
export default function Example() { | |
return ( | |
<Box | |
sx={{ | |
bgcolor: 'background.paper', | |
boxShadow: 1, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from 'react'; | |
import Button from '@material-ui/core/Button'; | |
import Box from '@material-ui/core/Box'; | |
const FileInput = () => { | |
const [selectedImage, setSelectedImage] = useState(null); | |
const [imageUrl, setImageUrl] = useState(null); | |
useEffect(() => { | |
if (selectedImage) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { makeStyles } from '@material-ui/core'; | |
import TextField from '@material-ui/core/TextField'; | |
import Button from '@material-ui/core/Button'; | |
import { useForm, Controller } from 'react-hook-form'; | |
const useStyles = makeStyles(theme => ({ | |
root: { | |
display: 'flex', | |
flexDirection: 'column', |
NewerOlder