Skip to content

Instantly share code, notes, and snippets.

Avatar

Lachlan Miller lmiller1990

View GitHub Profile
@lmiller1990
lmiller1990 / app.vue
Created Nov 7, 2020
Renderless Components
View app.vue
<template>
<v-input
v-slot="{ error }"
:min="5"
:max="10"
:value="username"
:validation-algorthm
>
<input v-model="username" />
<div v-if="error" class="error">
View App.vue
<template>
<h3>Luxon</h3>
<date-time
v-model="dateLuxon"
:deserialize="deserialize"
:serialize="serialize"
/>
{{ dateLuxon }}
<h3>Moment</h3>
View opinionated.txt
If you have complex function that needs to be called when some dependency changes (eg with useEffect) you would just pull the function out and pass the dependency as an argument... same as you would do with watchEffect. In the react example you either need to pass setState as an argument to said complex business logic function (not ideal) or do the setState in the hook; eg
```js
const [result, useResult] = useState('foo')
useEffect(() => {
const result = complexBusinessLogic(someVariable)
setResult(result)
}, [someVariable])
```
View FormValidation.vue
<template>
<h3>Patient Data</h3>
<form @submit.prevent="submit">
<div class="field">
<div v-if="!validatedForm.name.valid" class="error">
{{ validatedForm.name.message }}
</div>
<label for="name">Name</label>
<input id="name" name="name" v-model="form.name" />
</div>
View vdom2.js
// import jsdom-global. We need a global `document` for this to work.
require('jsdom-global')()
const { createApp, h } = require('vue')
// some components
const A = {
name: 'A',
data() {
return { msg: 'msg' }
},
View vdom1.js
const { createApp } = require('vue')
const App = {
template: `
<C>
<B>
<A />
</B>
</C>
`
@lmiller1990
lmiller1990 / Modal.vue
Last active May 18, 2020
useModal hook
View Modal.vue
<template>
<div class="modal" :style="style">
<div class="modal-background"></div>
<div class="modal-content">
<div id="modal-dest"></div>
</div>
<button class="modal-close is-large" aria-label="close" @click="hide"></button>
</div>
</template>
View hooks-higher-order-component-2.js
/**
* usesEntity - a higher order component for usage with the flux-entities pattern.
* The goal here is to wrap components that depend on a specific part or parts of the
* redux store to ensure they will trigger a request to fetch them if they are not loaded.
* In the meantime, the component will fall back to a loading state.
*
* Basic Usage
*
* The <TodosList /> component requires the todos state, so we wrap it using the
* usesEntity higher order component.
View hooks-higher-order-component.js
import React, { useEffect } from 'react'
import { createStore } from 'redux'
import { Provider, useDispatch, useSelector, shallowEqual } from 'react-redux'
import { ajaxBaseState, mapEntities, isLoaded } from 'flux-entities'
const fetchTodoRequest = () => ({ type: 'REQUEST' })
const fetchTodoSuccess = (payload) => ({
type: 'SUCCESS', payload
})
You can’t perform that action at this time.