React style reusable component that is NOT styled-component

Question

I have a reusable component that contains an animation called AnimationLoader. This component is a reusable component for loading states. I'm simply trying to take this component and use it inside of another component, UnpublishBlogBtn as the loader after a button click - that all works fine. However, I'd like to change the height and width of the animation inside of UnpublishBlogBtn and cannot for the life of me get that to work properly.

I've tried implementing Object.assign to bring in the CSS from the other file and just change the height and width. I've also tried just changing the CSS by doing <style={{}}> as well as wrapping the component in a div that has a style added(this appears to just change the button and not the animation itself).

<Button type="main" className="blogBtn">
   {currentlyUnpublishingBlog ? <AnimatedLoader css={{ height: 1, width: 1 }}/> : 
   'Unpublish Blog'}
</Button>

const AnimatedLoader = () => {
  return (
    <div
      css={{
        height: 45,
        width: 45
      }}
    >
      <AnimatedIcon 
        css={{
          animationDelay: '0.7s',
          height: 35,
          left: 10,
          position: 'absolute',
          top: 10,
          width: 35
        }}
      />
      <AnimatedIcon 
        css={{
          animationDelay: '0.7s'
          display: 'none',
          height: 45,
          left: 0,
          top: 0,
          width: 45,
        }}
      />
      <div
        css={{
          borderRadius: 20,
          borderStyle: 'solid',
          borderWidth: 3,
          height: 45,
          position: 'absolute',
          width: 45,
        }}
      />
    </div>
  )
};

export default AnimatedLoader;

After user clicks on Unpublish Blog button, the loader should display as a smaller width and height on top of the button. Currently, it maintains the same size as what is listed inside of AnimatedLoader component and I'd like the size to change inside of the UnpublishBlogBtn component.

Will Jenkins Will Jenkins · Accepted Answer · 2019-09-18T16:40:12

You can pass your css in as a prop to your AnimatedLoader

 const AnimatedLoader = ({css={
        height: 45,
        width: 45
      }}) => {
  return (
    <div
      {...css}
    >
      <AnimatedIcon 
        css={{
          animationDelay: '0.7s',
          height: 35,
          left: 10,
          position: 'absolute',
          top: 10,
          width: 35
        }}
     // ....

If you need to do more complex things, it's probably more sensible to pass in a prop that describes the different style options as a group. So isSmallSize as a boolean or different sizes as an enum etc.

Then in your component you adjust the styles depending on the prop.

const AnimatedLoader = ({ isSmallSize = false }) => {
    const outerSize = isSmallSize ? 
                       { height: 45, width: 45 } : { height: 1, width: 1 }
    const iconSize = isSmallSize ? 
                       { height: 35, width: 35 } : { height: 1, width: 1 }
    return (
       <div css={{ ...outerSize }}>
         <AnimatedIcon
           css={{
             animationDelay: '0.7s',
             left: 10,
             position: 'absolute',
             top: 10,
             ...iconSize
           }}
         />
         <AnimatedIcon
           css={{
             animationDelay: '0.7s',
             display: 'none',
             left: 0,
             top: 0,
             ...iconSize
           }}
         />
         <div
           css={{
             borderRadius: 20,
             borderStyle: 'solid',
             borderWidth: 3,
             position: 'absolute',
             ...iconSize
           }}
      />
    </div>
  )
}

React style reusable component that is NOT styled-component

1 Answers