Skip to content

Instantly share code, notes, and snippets.

View leimonio's full-sized avatar

leimonio leimonio

View GitHub Profile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
@leimonio
leimonio / react-cool-this.js
Created June 7, 2017 07:33
React Component with auto-binded this keyword using class properties
class Counter extends React.Component {
state = {clicks: 0}
increment = () => {
this.setState({click: this.state.clicks++})
}
render() {
return (
<button onClick={this.increment}>
You have clicked me {this.state.clicks} times
</button>
@leimonio
leimonio / ReactWrapperDOM.js
Last active March 26, 2022 20:55
Wrap DOM Element with React
import React, { Component } from 'react';
import ReactDOM, { findDOMNode } from 'react-dom';
const someDomNode = Object.assign(document.createElement('video'), {
src: 'test'
});
class DOMWrapper extends Component {
constructor(props) {
super(props);
@leimonio
leimonio / StringIncrementalReplacement.js
Created February 22, 2017 16:06
Replace string parts incrementally
String.prototype.encodeTags = function () {
return this.replace(/</g, '&lt;').replace(/>/g, '&gt;');
};
let text = "this is aw, <unbel> awesome, run for awesome news";
let parts = ['awesome news', 'aw', 'awesome'];
// 1. Firstly encode string
// There is a chance the string we want to highlight may include tagged values e.g. <day>
// so we need to encode these characters in order to be valid strings, not parsed as html element