React Inline Styles with responsive design
The breakpoint is set at 33% of screen size. Adjust the screen and the layout will be responsive with only inline CSS.
For edification please reference vjeux presentation on inline styles within React
// Available variables: | |
// - Machine | |
// - interpret | |
// - assign | |
// - send | |
// - sendParent | |
// - spawn | |
// - raise | |
// - actions |
const abortable = (func) => (...args) => { | |
let aborted = false; | |
const abort = () => { aborted = true; }; | |
const promise = new Promise((resolve, reject) => { | |
const resolveIfNotAborted = resolution => { | |
if (aborted) { | |
reject(Error('promise aborted')); | |
} |
export const joinArray = (list = [], separator) => | |
list.reduce((joinedList, item, index, {length}) => { | |
joinedList.push(item); | |
if (index < (length - 1)) { | |
joinedList.push(separator); | |
} | |
return joinedList; | |
}, []); |
export const contains = (list = [], test) => list.indexOf(test) >= 0; | |
export const removeItemAt = (list = [], index = 0) => | |
[ | |
...list.slice(0, index), | |
...list.slice(index + 1), | |
]; | |
export const insertItemAt = (list = [], index = 0, item) => | |
[ |
React Inline Styles with responsive design
The breakpoint is set at 33% of screen size. Adjust the screen and the layout will be responsive with only inline CSS.
For edification please reference vjeux presentation on inline styles within React
React Inline Styles with Media Query
The breakpoint is set at 800px. Adjust the screen and the layout will be responsive with only inline CSS.
For edification please reference vjeux presentation on inline styles within React