๐Ÿ“ Unpolished Writing - Work in Progress

Types of plugins & extensions

23rd January 2023
pluginsarchitecture
const StyledText = styled(Text, {
	bg: "red"
});

Assume we want to extend the style function to accept a prop called animate which isnโ€™t a part of the original API.

const AnimatedStyledText = styledWithAnimate(Text, {
   bg: "red",
   animate: {
      bg: "blue"
   }
});

How do we do this? composition!

const styledWithAnimate = extendStyle(function() {
})

Updating the props behaviour

styled({ x: 5 });

styledWithY({ x: 5, y: 10 });

styledWithYAndZ({ x: 5, y: 10, z: 15 });

function