Skip to content

Instantly share code, notes, and snippets.

View rethna2's full-sized avatar

Rethna Ganesh rethna2

11 followers · 11 following
View GitHub Profile
@rethna2
rethna2 / kanbanBoardwithHooksandReactDnD.jsx
Created October 28, 2019 15:55
import React, { useState, useCallback, useRef } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import update from "immutability-helper";
const tasksList = [
{ _id: 1, title: "First Task", status: "backlog" },
{ _id: 2, title: "Second Task", status: "backlog" },
{ _id: 3, title: "Third Task", status: "backlog" },
{ _id: 4, title: "Fourth Task", status: "new" },
@rethna2
rethna2 / pathFinder_part2.html
Last active July 22, 2019 15:09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
#inputArr{
width: 300px;
height: 200px;
@rethna2
rethna2 / pathFinder_part1.html
Created July 21, 2019 07:39
Display Maze based on the input
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
#inputArr{
width: 300px;
height: 200px;
@rethna2
rethna2 / KanbanBoard-ReactDnD.js
Created December 19, 2018 09:08
A quick demo on how to use React-dnd library
import React from "react";
import { DragDropContext, DropTarget, DragSource } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import update from "immutability-helper";
const tasks = [
{ _id: 1, title: "First Task", status: "backlog" },
{ _id: 2, title: "Second Task", status: "backlog" },
{ _id: 3, title: "Third Task", status: "backlog" },
{ _id: 4, title: "Fourth Task", status: "new" },
@rethna2
rethna2 / spa.html
Created July 27, 2018 05:18
A minimal prototype of Single Page Application (SPA)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SPA - demo</title>
<style>
.page {
@rethna2
rethna2 / refs.js
Created November 8, 2017 10:02
This gist shows how to use 'ref' in React. It also shows how to have 'ref' in a child component which can be assessed from the parent component.
import React from 'react';
const Child = props => (
<div
style={{
width: 300,
height: 100,
backgroundColor: '#bbb',
border: '1px solid gray',
}}