Skip to content

Instantly share code, notes, and snippets.

View Reine0017's full-sized avatar
❤️

Fang Ran Reine0017

❤️
62 followers · 17 following
View GitHub Profile
@Reine0017
Reine0017 / SomePage.tsx
Created January 1, 2022 15:35
Simple Counter
function SomePage() {
const [count, setCount] = React.useState(0)
return (
<>
<div className="SomePage">
THIS IS SOMEPAGE
</div>
<br></br>
@Reine0017
Reine0017 / main.py
Created December 19, 2021 04:29
Image Resizer Python Script
import streamlit as st
import imutils
from PIL import Image
import numpy as np
st.title("My Streamlit Image Resizer")
content_file = st.sidebar.file_uploader("Choose a Content Image", type=["png", "jpg", "jpeg"])
imgWidth = st.sidebar.number_input('Resized Image Width', 1, step=1)
@Reine0017
Reine0017 / index.html
Created November 4, 2021 13:04
index.html from CRA with comments removed and new DOM element defined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
@Reine0017
Reine0017 / ModalPortal.tsx
Created November 4, 2021 12:59
Modal Portal Component
import ReactDom from "react-dom"
interface MyModalProps {
openModal: boolean;
closeModal: (onClose: boolean) => void
}
export default function ModalPortal(modalProps: MyModalProps) {
if(!modalProps.openModal){
return null
@Reine0017
Reine0017 / ReactPortalPage.tsx
Created November 4, 2021 12:43
Demo with Portal - ReactPortalPage
function ReactPortalPage() {
const [openModal1, setOpenModal1] = useState(false)
return (
<div className="ReactPortalPage">
THIS IS THE REACT PORTAL PAGE (TO DEMO REACT PORTALS W MODALS)
{/* ...commented out for brevity */}
<div className="withPortal">
Demo With Portal
<div className="sectionContent" onClick={() => console.log("clicked withPortal")}>
@Reine0017
Reine0017 / MyModal.tsx
Created November 4, 2021 10:06
MyModal.tsx
import "../AllStyles.css"
interface MyModalProps {
openModal: boolean;
closeModal: (onClose: boolean) => void
}
export default function MyModal(modalProps: MyModalProps) {
if(!modalProps.openModal){
return null
@Reine0017
Reine0017 / ReactPortalPage.tsx
Last active November 4, 2021 10:04
Showing part of the ReactPortalPage component to demo how to render modal without react portals
function ReactPortalPage() {
const [openModal, setOpenModal] = useState(false)
return (
<div className="ReactPortalPage">
THIS IS THE REACT PORTAL PAGE (TO DEMO REACT PORTALS W MODALS)
<div className="withoutPortal" onClick={() => console.log("clicked withoutPortal")}>
Demo Without Portal
<div className="sectionContent">
<button onClick={() => setOpenModal(true)}>Click Me To Open Modal</button>
@Reine0017
Reine0017 / App.tsx
Created October 31, 2021 10:47
To show how to redirect with react-router-dom
import React from 'react';
import {
Switch,
Route,
BrowserRouter as Router,
} from "react-router-dom";
import NavBar from './components/NavBar';
import HomePage from './pages/homePage/HomePage';
import ReactPortalPage from './pages/reactPortalPage/ReactPortalPage';
@Reine0017
Reine0017 / NavBar.tsx
Created October 31, 2021 10:03
Our NavBar component
import {
Link
} from "react-router-dom";
import "./NavBar.css"
function NavBar() {
return (
<div className="NavBar">
<Link to="/">Home</Link>
<Link to="/react-portal">React Portals</Link>
@Reine0017
Reine0017 / PlotlyComponent.jsx
Created April 10, 2021 06:54
Calculate and Create Coordinate Arrays for Helix
//Note that this isn't the full code for this js file, please refer to the repo for the full code
const linspaceFn = (startValue, stopValue, cardinality) => {
var arr = [];
var step = (stopValue - startValue) / (cardinality - 1);
for (var i = 0; i < cardinality; i++) {
arr.push(parseFloat((startValue + (step * i)).toFixed(3)));
}
return arr;
}
const t = linspaceFn(0, 20, 100)