Skip to content

Instantly share code, notes, and snippets.

Avatar

Anuj oyeanuj

View GitHub Profile
@oyeanuj
oyeanuj / animated-phrases
Created Nov 5, 2016 — forked from piedpipes/animated-phrases
A React version of the 'type' animated headlines from CodyHouse (http://codyhouse.co/demo/animated-headlines/index.html)
View animated-phrases
var React = require('react'),
ClassNames = require('classnames');
var AnimatedPhrases = React.createClass({
getInitialProps: function () {
return {
animateType: 'type'
}
},
@oyeanuj
oyeanuj / Basic Explanation.md
Last active Feb 7, 2017
Exploring reusable components in Slate
View Basic Explanation.md

Lets say, we currently have a component which renders a link embed like shown below. It shows the title, description, domain and author.

And now lets say, we want to make each of those editable as well.

Is it possible to still reuse the existing component or needs multiple Slate rendered components - one each for LinkEmbed, LinkTitle, LinkDescription, LinkAuthor.

@oyeanuj
oyeanuj / Rebase.bash
Last active Oct 18, 2017
Rebasing instructions
View Rebase.bash
# For example I will create a branch off of “next”:
git checkout next
git checkout -b feature/my-new-feature
# Then I have done some work on my new branch, whilst updates
# happened to “next”. Before I do a rebase of my feature branch
# I do a fetch and check my branches:
git fetch
git branch -vv
@oyeanuj
oyeanuj / AutoSavingForm.md
Last active Jul 2, 2020
Auto-saving forms using Redux-Form
View AutoSavingForm.md

Here is how I ended up making this work. For more context and background on the discussion, I recommend reading conversation in ReduxForm#2169 (and chiming in with your learnings, etc).

So, as per the conversation there, I tried the 'many little forms' approach. I am sharing both my approach, and a crude abstracted out gist that can hopefully help out y'all.

Essentially, with this approach:

  1. You want to use each field as a little form which submits debounced onChange.
  2. For each field as a little form, you want to abstract that into a component which can be provided an input, as much as possible.
  3. Set autofocus for the first form.
  4. For debounced onChange, I used react-debounced-input.
You can’t perform that action at this time.