Skip to content

Instantly share code, notes, and snippets.

View NicholasKuchiniski's full-sized avatar

Nicholas Kuchiniski NicholasKuchiniski

17 followers · 10 following
View GitHub Profile
@NicholasKuchiniski
NicholasKuchiniski / JQueryToReact.js
Last active March 5, 2018 00:47
Mostrando e escondendo componentes com react.
import React, { Component } from 'react';
class JQueryToReact extends Component {
constructor(props) {
super(props);
this.state = {
isShow: false
}
}
@NicholasKuchiniski
NicholasKuchiniski / index.jsx
Created May 15, 2018 22:49
Exemplo de uso da lib 'react-router-with-props' para determinar o acesso a uma rota que necessita de autentificação.
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { PrivateRoute } from 'react-router-with-props';
class App extends Component {
state = {
// Verifica se o item 'token' existe no localStorage
@NicholasKuchiniski
NicholasKuchiniski / TextFieldValidator.js
Created May 24, 2018 14:34
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TextField from '@material-ui/core/TextField';
export class EmailTextField extends Component {
state = {
error: undefined
}
@NicholasKuchiniski
NicholasKuchiniski / random-date.js
Created June 9, 2018 22:45 — forked from miguelmota/randomDate.js
Random date in JavaScript
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
console.log(randomDate(new Date(2012, 0, 1), new Date()));
@NicholasKuchiniski
NicholasKuchiniski / hexToRgb.js
Created December 22, 2018 20:23
Transforma uma cor HEX para RGB OU RGBA
function hexToRgb(hex, transparency) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return transparency ? `rgba(${r}, ${g}, ${b}, ${transparency})` : `rgb(${r}, ${g}, ${b})`
}
export default hexToRgb;
@NicholasKuchiniski
NicholasKuchiniski / text-avatar.scss
Last active January 4, 2019 18:23
Avatar circular com duas letras
.text-avatar{
display: block;
font-size: 12px;
font-weight: 700;
height: 32px;
left: 0;
line-height: 32px;
overflow: hidden;
position: absolute;
text-align: center;
@NicholasKuchiniski
NicholasKuchiniski / vars.css
Created January 28, 2019 20:21
Define CSS vars
:root{
--primary-color: blue;
--secondary-color: purple;
}
@NicholasKuchiniski
NicholasKuchiniski / useVars.css
Last active January 28, 2019 20:26
Using CSS Vars
.text-primary{
color: var(--primary-color);
}
.text-secondary{
color: var(--secondary-color);
}
@NicholasKuchiniski
NicholasKuchiniski / invert.html
Created March 30, 2019 21:29
invert color on mouse scroll
<html>
<head>
<title>Invert color on mouse position change</title>
</head>
<body style="display: flex; margin: 0px;">
<div id="scroll" style="height: 52px;width: 52px;filter: invert(100%);position: absolute;background: #000;border-radius: 100%;"></div>
<div style="background: pink; height: 100vh; width: 50vw"></div>
<div style="background: yellow; height: 100vh; width: 50vw"></div>
</body>
<script>
@NicholasKuchiniski
NicholasKuchiniski / sampleInfiniteScroll.js
Created August 28, 2019 19:06
example
const DataTable = ({ data }) => {
const [items, setItems] = useState();
const remove = () => {
///...
}
const fetchMoreData = () => {
setTimeout(() => {
setItems([data, ...data])