Skip to content

Instantly share code, notes, and snippets.

Avatar

Andrey Gubanov finom

View GitHub Profile
@finom
finom / useArrayState.js
Last active Jun 29, 2020
[finom/use-array-state] A hook for creating observable-like immutable arrays based on useState
View useArrayState.js
/*
A hook for creating observable-like immutable arrays based on useState
in other words allows to call push, pull, slice... methods which are going to deliver
a new array every time and trigger component to re-render
Usage:
const [array, arrayRef] = useArrayState(initialValue = []);
arrayRef.push(foo); // triggers component to re-render and makes 'array' to update
@finom
finom / useBooleanState.js
Last active Jun 29, 2020
[finom/use-boolean-state] Simplifies boolean useState creation
View useBooleanState.js
/*
Usage:
const [value, setTrue, setFalse] = useBooleanState(initialValue);
*/
import { useState, useCallback } from "react";
export default function useBooleanState(initialValue) {
const [value, onSetValue] = useState(initialValue);
const onSetTrue = useCallback(() => onSetValue(true), []);
@finom
finom / createStateContext.js
Created May 11, 2020
[finom/create-state-context] Creates useState-like hook which uses react context
View createStateContext.js
/*
Can be used to achieve useState hook experience with React Context API
1. Create context with some initial state:
const MyContext = createStateContext(0);
2. Wrap your component by the context provider
<MyContext.Provider>
<MyComponent />
</MyContext.Provider>
3. Use it in your components with built-in react useContext hook:
import { useContext } from 'react';
@finom
finom / useForceUpdate.js
Created May 11, 2020
[finom/use-force-update] Allows to make force re-render of react components
View useForceUpdate.js
/*
Usage:
const [forceIndex, forceUpdate] = useForceUpdate();
// call forceUpdate() when component needs to be updated
// use forceIndex as key to force re-render child components
Important! This function is most likely an antipattern! But sometimes I can be super useful:
it can re-render react native screens when something gone wrong and user is prompted by a "Try again" button.
*/
@finom
finom / usePromiseEffect.js
Created May 11, 2020
[finom/use-promise-effect] A promise effect hook
View usePromiseEffect.js
/*
Usage:
usePromiseEffect(async => () => {
await fetch(foo);
// ...
})
*/
import { useEffect } from 'react';
@finom
finom / withContextProviders.js
Created May 11, 2020
[finom/with-context-providers] A react decorator which wraps a component by context providers
View withContextProviders.js
/*
A bit of syntax sugar over context providers. Allows to turn code like this:
<SomeProvider1>
<SomeProvider2>
<SomeProvider3>
<MyComponent />
</SomeProvider3>
</SomeProvider2>
</SomeProvider1>
@finom
finom / Touchable.js
Last active May 8, 2020
[finom/react-native-touchable] A universal Touchable (React Native) which behaves like TouchableOpacity on iOS but like TouchableNativeFeedback on Android
View Touchable.js
import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
import { createElement } from 'react';
// use TouchableNativeFeedback for android and TouchableOpacity for ios
// use TouchableOpacity with activeOpacity=1 for both platforms if disabled=true
const Touchable = ({
disabled,
onPress,
...props
}) => {
@finom
finom / NiceGradient.js
Last active Apr 22, 2020
Nice looking iOS-like linear gradients preset for react native based on https://www.behance.net/gallery/62158409/Gradients-Color-Style
View NiceGradient.js
/*
Usage:
<NiceGradient index={9} style={StyleSheet.absoluteFill} />
Where index is an index from gradients array (0...14) based on https://www.behance.net/gallery/62158409/Gradients-Color-Style
*/
import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
export const gradients = [
['#FF6CAB', '#7366FF'],
@finom
finom / postCSSImportLoadJSHook.js
Created Mar 4, 2018
The function enhances postcss import plugin allowing CSS files to @import JS files
View postCSSImportLoadJSHook.js
const readCache = require('read-cache');
const fs = require('fs');
const { NodeVM, VMScript } = require('vm2');
const optional = require('optional');
/*
The function enhances postcss import plugin allowing CSS files to @import JS files
which, in their turn, import a valid PostCSS string.
Example code:
@finom
finom / ReduxFormHiddenField.js
Last active Feb 9, 2018
The component allows to get redux-form values without direct access to redux store
View ReduxFormHiddenField.js
/*
The component allows to get redux-form values without direct access to redux store.
When redux-form mounts such field the component calls onFill handler with received form value.
Basic usage:
<Field component={ReduxFormHiddenField} onFill={(value) => console.log(value)} />
In real world apps you would like, for example, to use withState function
from Recompose which receives value and rerenders component again with it.
You can’t perform that action at this time.