akshay-nm

  const {
    isValid: formIsValid,
    isValidating,
    resetForm,
    email,
    showEmailWarning,
    onEmailChange,
    password,
    showPasswordWarning,
    onPasswordChange

akshay-nm

{
  // form states and functions
  isValid, // the overall form validity
  isValidating, // are any validations still running
  triggerValidation, // trigger validations 
  reset, // reset the form back to default configuration 

  // field wise states and functions  
  // for email  
  email,

akshay-nm

const config = {
  states: [
    {
      name: 'email',
      default: '',
      defaultIsValid: false,
      mustBeValid: true,
      validator: () => true
    },
    {

akshay-nm

{
  name: 'nameInCamelCase', // Although I have added a camelize check but still...
  default: '', // the default value of field
  defaultIsValid: false, // is the field valid by default
  mustBeValid: true, // is the field mandatory
  validator: (value) => true // the validator
}

akshay-nm

name: Node.js Package
on:
  release:
    types: [created]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Setup .npmrc file to publish to npm

akshay-nm

// No alterations in stuff before this as it is already configured...

const api = () => {
  return {
    login: {
      post: (email, password) => {
        const formData = new FormData()
        formData.append('email', email)
        formData.append('password', password)

akshay-nm

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

akshay-nm

States	Cover attributes	Image attributes
S0	{ left: 0%, width: 0% }	{ opacity: 0, transform: scale(0.5) }
S1	{ width: 100% }	no change
S2	{ width: 0%, left: 100% }	{ transform: scale(1), opacity: 1 }

akshay-nm

.image {
  opacity: 0;
  transform: scale(0.5);
  width: 100%;
  height: 100%;
  position: absolute;
}

.cover {
  width: 0%;

akshay-nm

import React, { useState } from 'react'
import { useSpring, animated, config } from 'react-spring'
import './styles.css'

const ImageReveal = () => {
  const [reset, set] = useState(false)
  const { coverWidth, coverLeft, imageScale, imageOpacity } = useSpring({
    from: { coverWidth: 0, coverLeft: 0, imageScale: 0.5, imageOpacity: 0 },
    to: async next => {
      await next({ coverWidth: 100, coverLeft: 0, imageScale: 0.5, imageOpacity: 0 })