Skip to content

Instantly share code, notes, and snippets.

Avatar
💜
Testing statuses

Mikael Brevik mikaelbr

💜
Testing statuses
View GitHub Profile
View allowed-children.tsx
type AllowedChildren =
| React.ReactElement<BasicItemProps>
| React.ReactElement<HeaderItemProps>
| AllowedChildren[];
type ListSectionProps = {
children: AllowedChildren;
};
const childrenTypes = [BasicItem, HeaderItem];
View use-screen-dimensions.ts
type ScreenDimensions = {
height: number;
width: number;
}
function useScreenDimension(): ScreenDimensions {
const [dimensions, setDimensions] = useState<ScreenDimensions>(() =>
Dimensions.get('screen'),
);
@mikaelbr
mikaelbr / cloudSettings
Last active May 22, 2020
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2020-05-22T11:42:02.254Z","extensionVersion":"v3.4.3"}
View api-router-library.js
import http from "http";
const db = createDb();
const app = createApp();
const router = app()
.on("GET", "/api/score", function(req, res) {
result(res, 200, { scores: db.entries() });
})
.on("POST", "/api/score", function(req, res) {
const { name, score } = req.body;
@mikaelbr
mikaelbr / own-jsx-final.js
Created Oct 8, 2019
Complete code example for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475
View own-jsx-final.js
// Using an IIFE to hide some implementation details.
// If you use a bundler this should be it's own file.
const createElement = (function() {
const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";
const eventName = k => k.substr(2).toLowerCase();
const isString = s => typeof s === "string";
const isFunction = s => typeof s === "function";
function attrs(el, props) {
// Remember, JSX sets props to `null` if nothing is defined, so in that case we just return el
View own-jsx-16.js
// ... inside our createElement when adding children:
children.flat().forEach(child => {
const node = !isString(child) ? child : document.createTextNode(child);
el.appendChild(node);
});
// ... createElement continues
View own-jsx-15.js
const isFunction = s => typeof s === "function";
function createElement(tag, props, ...children) {
// If first argument is function, we know it is custom component,
// So call it as a function, passing the props with children as a property.
// Using spread like this will work when props is `null` also
if (isFunction(tag)) {
return tag({ ...props, children });
}
View own-jsx-13.js
let myHeader = <Header id="myHeader">My important title</Header>;
// Which outputs
let myHeader = createElement(
Header,
{
id: "myHeader"
},
"My important title"
);
View own-jsx-14.js
function Header(props) {
return <h1 id={props.id}>Title: {props.children}</h1>;
}
// Or with destructuring
function Header({ id, children }) {
return <h1 id={id}>Title: {children}</h1>;
}
View own-jsx-12.js
const button = <button onClick={() => console.log("Hello!")}>Click me</button>;
document.body.appendChild(button);
// When clicked:
//> Hello!
//> Hello!
You can’t perform that action at this time.