useInlineStyles is a function that returns an object with CSS styles that can be applied to an element using the style attribute in JSX.
useInlineStyles is similar to the first version that you showed me, but it has a slightly different function signature and the default values for the include argument have been changed.
This function also returns an object with CSS styles that can be applied to an element using the style attribute in JSX. It takes an object called uniStyles as an argument, which contains various CSS properties, such as height, width, fontSize, color, etc. It also takes an optional include argument, which is an object that specifies which groups of styles to include in the returned object. The groups of styles are positions, gaps, sizes, fonts, colors, and all.
The function uses the useMemo hook from the react library to memoize the CSS style objects that it returns, so that it doesn't have to recalculate them on every render if the input hasn't changed. This helps to improve the performance of the component.
npm i use-inline-styles
or
yarn add use-inline-styles
all group:
const inline = useInlineStyles({ uniStyles: props, include: {all: true } })
only gaps group:
const inline = useInlineStyles({ uniStyles: props, include: {gaps: true } })
and etc.
example of use:
const App = ({
...props,
}) {
const inline = useInlineStyles({ uniStyles: props, include: {gaps: true } })
return <div style={...inline}> </div>
}
<App mt={5} />
default props:
include = { positions: false, gaps : false, sizes : false, fonts : false, colors : false, all : false, }