mfrancois3k

export default function Layout(props) {
    const {
        animate,
        gutter,
        vgutter,
        columns,
        components,
        mediaQuerySmall,
        mediaQueryMedium,
        mediaQueryBig,

mfrancois3k

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

export function useMediaQuery(query) {
    const [matches, setMatches] = useState(false)
    useEffect(() => {
        const media = window.matchMedia(query)
        if (media.matches !== matches) {
            setMatches(media.matches)

mfrancois3k

Layout Components

Deal with arranging other components on a page

Split Screen

import styled from 'styled-components'

const Container = styled.div`
  display: flex;
`

mfrancois3k

function asyncReducer(state, action) {
  switch (action.type) {
    case 'pending': {
      return {status: 'pending', data: null, error: null}
    }
    case 'resolved': {
      return {status: 'resolved', data: action.data, error: null}
    }
    case 'rejected': {
      return {status: 'rejected', data: null, error: action.error}

mfrancois3k

2010-03-12
/*
JavaScript Module Pattern: In-Depth

The module pattern is a common JavaScript coding pattern. It’s generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I’ll review the basics and cover some truly remarkable advanced topics, including one which I think is original.

The Basics

We’ll start out with a simple overview of the module pattern, which has been well-known since Eric Miraglia (of YUI) first blogged about it three years ago. If you’re already familiar with the module pattern, feel free to skip ahead to “Advanced Patterns”.

mfrancois3k

setConfiguration = appName => {
      this.getConfiguration(appName).then(module =>
        this.setState(
          {
            appName,
            configuration: module.default
          },
          this.configurationSetCallback
        )
      );

mfrancois3k

import axios from './axios-custom'

export const foo = () => axios.get('/foo/bar/')

export const products = {
  
  get: id => 
    axios.get(`/products/${id}`),
  
  save: (data, id = null) => 

mfrancois3k

import React from 'react'
import { useStore } from 'effector-react'

import { $todo, $todos, submitPressed, inputChanged, todoToggled, todoRemoved } from './stores'

export const TodoInput = () => {
  // Use useStore(store) hook to get the state
  // And update the component on state changes
  const todo = useStore($todo)
  

mfrancois3k

import { createStore, createEffect } from 'effector'

const getPost = createEffect('Fetch posts')

const $isLoading = createStore(false)
const $post = createStore(null)
const $error = createStore(null)

$isLoading
  .on(getPost, () => true)

mfrancois3k

import { combine } from 'effector'

const $name = createStore('Anton')
const $surname = createStore('Kosykh')

// Creates a store with an object of stores states
const $profile = combine({
  name: $name,
  surname: $surname
})