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 Dec 16, 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.