Install from the NPM repository using yarn or npm:
yarn add flexible-chain
Or
npm install flexible-chain
We have a lot of repetitive code and the chore of writing different combinations. Also, over time, we forget what a piece of code should do and spend more time understanding it. This utility helps to make your code more flexible, understandable and transparent.
Flexible chain is a small but powerful utility for creating tree chains and obtaining results after combining it.
Simple use for creating various chains
import { combine } from "flexible-chain";
const colorProps = {
Red: {
color: 'red',
},
/* ... */
};
const sizeProps = {
L: {
fontSize: 16,
},
/* ... */
};
const initialFontTree = { ...colorProps, ...sizeProps };
export const fontResult = {
View: style => style,
Color: style => style.color,
Size: style => style.fontSize,
};
const Font = combine(initialFontTree, fontResult);
console.log(Font.Red.View); // {color: 'red'}
console.log(Font.Red.L.View); // {color: 'red', fontSize: 16}
console.log(Font.Red.L.Color); // 'red'
console.log(Font.Red.L.Size); // 16
More flexible and specific use of combine for your tasks. For example, when you want the state to be not an object (by default), but a different data type.
import { combine } from "flexible-chain";
const mainLanguageKey = {
Hello: 'Hello',
Welcome: 'Welcome',
};
const secondaryLanguageKey = {
Dear: 'dear',
To: 'to',
};
const initialLanguageTree = { ...mainLanguageKey, ...secondaryLanguageKey };
const customResultTree = {
Key: keys => keys.join('.'),
Keys: keys => keys,
Name: keys => name => `${[...keys, name].join(' ')}!`,
Length: keys => keys.length,
};
const customConcatenationFn = (prev, key) => [...prev, key];
const customInitialState = [];
const Salutation = combine(initialLanguageTree, customResultTree, customConcatenationFn, customInitialState);
console.log(Salutation.Hello.Dear.Key); // 'Hello.dear'
console.log(Salutation.Hello.Dear.Keys); // ['Hello', 'dear']
console.log(Salutation.Hello.Length); // 1
console.log(Salutation.Hello.Dear.Length); // 2
/* ... N ... */
console.log(Salutation.Hello.Name('Kris')); // 'Hello Kris!'
console.log(Salutation.Welcome.To.Name('flexible-chain')); // 'Welcome to flexible-chain!';
You can also make beautiful chains for react components.
import { combine, combineComponent } from "flexible-chain";
const SpanComponent = props => <span {...props} />;
const ParagraphComponent = props => <p {...props} />;
const componentColors = {
White: {
color: 'white',
},
Red: {
color: 'red',
},
/* ... */
};
const componentFontStyle = {
Italic: {
fontStyle: 'italic',
},
Oblique: {
fontStyle: 'oblique',
},
/* ... */
};
const componentFontWeight = {
Bold: {
fontWeight: 'bold',
},
/* ... */
};
const componentStyles = { ...componentColors, ...componentFontStyle, ...componentFontWeight };
const componentResult = {
Text: combineComponent(SpanComponent, 'style'),
Paragraph: combineComponent(ParagraphComponent, 'style'),
};
const UserInfo = combine(componentStyles, componentResult);
const UserProfile = () => (
<>
<UserInfo.White.Bold.Text>User Name</UserInfo.White.Bold.Text>
<UserInfo.White.Bold.Italic.Text>User Surname</UserInfo.White.Bold.Italic.Text>
<UserInfo.Red.Oblique.Paragraph>User Role</UserInfo.Red.Oblique.Paragraph>
/* ... */
</>
);
const HeaderUserInfo = () => (
<>
<UserInfo.White.Bold.Paragraph>User Name</UserInfo.White.Bold.Paragraph>
<UserInfo.Red.Italic.Paragraph>User Role</UserInfo.Red.Italic.Paragraph>
/* ... */
</>
);
console.log(UserProfile); // ->
/*
<span style={{color: 'white', fontWeight: 'bold'}}>User Name</span>
<span style={{color: 'white', fontWeight: 'bold', fontStyle: 'italic'}}>User Surname</span>
<p style={{color: 'red', fontStyle: 'oblique'}}>User Role</p>
*/
import { combine, combineComponent } from "flexible-chain";
import cs from 'classnames';
import styles from './style.module.css';
/* ... */
const SpanComponent = ({classes, ...props}) => {
return <span className={cs(classes)} {...props} />;
}
const componentResult = {
Text: combineComponent(SpanComponent, 'classes'),
};
const UserInfo = combine(styles, componentResult);
/* ... */
Above are the most simple and commonly used options. You can combine more complex and dynamic connections for easier reuse.