Forem: Jonathan Gerbaud

Easy component styles overriding with React & Soperio

Jonathan Gerbaud — Mon, 02 Jan 2023 09:10:14 +0000

Today, I want to talk to you about one of many advantages of Soperio components: style overriding.

We all have the case when we're using a component, and we need to apply a bit of styles customization on it.

Now, this could be a custom component or a component from a UI framework.

There are multiple ways of doing this, be it using additional CSS, utility classes, the style property, the sx property (for framework providing this property), or even creating a new component based on the initial one.

But let's see how to do this simply with Soperio.

How to override a component styles with Soperio

Let's say we are using the component below:

import { SoperioComponent, ParentComponent } from "@soperio/react"

interface MyBadgeProps extends SoperioComponent, ParentComponent
{
   // ...
}

function MyBadge({ children, ...props }: MyComponentProps)
{
   return (
      <div 
         p="3"
         rounded
         bgColor="lightblue"
         textColor="white" 
         {...props}
       >
         {children}
       </div>
   )
}

Ok, so now we have a component with a padding of 3 units, rounded corners, a light blue background and white text. Let's say this component is badge component.

Now, let's say we want to use this component into our UI.

We just want to display a list of badges next to an icon. But depending on the value of some variable, we want to change its background color.


const badges = [
  {
     name: "Cats",
     value: 12
  },
  {
     name: "Dogs",
     value: 53
  },
  {
     name: "Horses",
     value: 87
  },
]

function MyRandomComponent()
{
   return (
      <div dflex flexRow spaceX="3">
         <MyIcon ... />

         {badges.map(item => 
             <MyBadgeComponent 
                bgColor={item.value > 50 ? "green" : "red"}
             >
                {item.name}
             </MyBadgeComponent>
          )}
       </div>
   )
}

Now, as you can see, I just overriden the property bgColor or the badge component, to make it dynamic. Very simple, isn't it?

But the cool thing is: we're not only limited to the properties defined in MyBadgeComponent. We can also add any of the properties of Soperio.

Since the properties of MyBadgeComponent extends the SoperioComponent interface, we can use all of Soperio's properties.

Let's take back our example, but this time we want to change the font weight and text size as well.


const badges = [
  {
     name: "Cats",
     value: 12
  },
  {
     name: "Dogs",
     value: 53
  },
  {
     name: "Horses",
     value: 87
  },
]

function MyRandomComponent()
{


   return (
      <div dflex flexRow spaceX="3">
         <MyIcon ... />

         {badges.map(item => 
             <MyBadgeComponent 
                bgColor={item.value > 50 ? "green" : "red"}
                fontWeight="800"
                textSize="xl"
             >
                {item.name}
             </MyBadgeComponent>
          )}
       </div>
   )
}

Easy, no? You can do this with all the components!

How to do the same thing without Soperio.

If you're not using Soperio, you can achieve the same thing, more or less easily.

You could decide to add some CSS and attribute the associated class name to the component.

Or you could use the good old style property. Or a mix of the two.

But you would have to concatenate the classnames, or the style prop object.

If you're using a UI framework like MUI or Chakra UI, you might want to use the sx prop. But here again, you would need to concatenate it.

If you're using styled components, you would need to create a new component based on the first, and add the new styles to it.

Other advantages of this method

Overriding styles with Soperio is simple and easy. But you also take advantage of the values of your theme, the responsive design properties, hover and focus states, the dark mode theme and everything that also comes with Soperio.

Things that you couldn't do using the style property or additional CSS for example (unless you write a lot of code).

It might be possible with the sx property but again, it would not be so easy. Same goes for styles components.

Conclusion

Overriding components' styles with Soperio is simple and easy. It doesn't add much code, is readable and you can enjoy of all Soperio's features.

Give it a try!

React & CSS : The readability argument

Jonathan Gerbaud — Mon, 05 Dec 2022 12:04:56 +0000

In a previous post, I described my new CSS-IN-JS framework for React, named Soperio UI, where I'm trying to "get rid off" CSS. You can read more about it here.

A quick link to my new framework if you want to understand a bit better what kind of "system" I'm trying to offer devs to improve their coding experience with React and styling:
https://www.soperio-ui.com

Since then, I've heard a few people giving me feedback like:

Hey, your new framework is awesome! However, one advantage of CSS is that, it allows separation of styles in a different file, that increases the code readability.

I was a bit surprised as I personally dislike CSS a lot, and I thought it was common ground that CSS was still something that most devs had to cope with because there was nothing better out there yet.

So let's discuss this.

The context

I'm building SaaS apps and I have a lot of component styling to do.

While I'm using a UI component framework (Valerya UI, built on top of Soperio, but could use anything else) and I do have a global theme setup for my apps, I need to quicky and easily style each and every React component of every of my app screens (that means lots of components).

File splitting

I might be crazy, but I never understood why people want so desperately to put the CSS in a separate file from a component's React code file.

Maybe that's because they want to separate the logic from the design, or because it has always been this way since the emergence of CSS, or because CSS is taking way too much space (meaning lines of code) in general, or because they want to use CSS generators like SASS or LESS.

Although this is not the subject of this article, I would like hear your thoughts about this and why you think this is a good idea.

Improves code readability, really?

So, someone told me the following:

Everything inline reduces the code readability. Secondly, css allows us to combine multiple related props in a single definition such as border: 'solid 1px black'

In this very simple case, I would agree. With Soperio, it would translate in something like this:

<div 
    border="px" // value from theme, translates to 1px
    // You can define this property althought it's "solid"
    // by default so you can omit it
    borderStyle="solid"
    borderColor="black"
>
   ... // Content of div
</div>

// or
<div border="px" borderStyle="solid" borderColor="black">...</div>

In this use case, you get 3 props (or just 2 as you can omit borderStyle). So yeah, it's a bit more than a single line of CSS.

Real case scenario

When you're building a SaaS app, your component needs to react to states, dark mode and be responsive.

So let's write a quick component. We will build a simple card component with an image header, a title and a description. It will respond to the hover state by slightly changing its background color. It will be display as a column on mobile screens and a row on larger screens.

Let's start with Soperio first.

import { SoperioComponent } from "@soperio/react"

interface MyComponentProps extends SoperioComponent
{
  imageUrl: string,
  title: string, 
  description: string
}

function MyComponent({ imageUrl, title, description, ...props }: MyComponentProps)
{
  return (
    <div
      dflex
      flexCol
      md_flexRow
      bgColor="light"
      hover_bgColor="lightHover"
      textColor="dark"
      md_maxW="1/3"
      md_maxH="48"
      rounded
      shadow
      {...props}
    >
      <div
        bgImage={`url(${imageUrl})`}
        w="full" h="40"
        md_w="32rem" md_h="unset" md_maxH="48"
        bgSize="cover"
        bgPosition="center"
        roundedT
        mb="3"
        md_mb="0"
      />

      <div dflex flexCol pb="3" px="4">
        <div trait="typo.display5">{title}</div>
        <p 
          trait="typo.body2" 
          fontWeight="400" 
          textColor="darkSecondary" 
          mt="3"
        >
          {description}
        </p>
      </div>
    </div>
  )
}

Okay, now let's convert this code to CSS

interface MyComponentProps
{
  imageUrl: string,
  title: string, 
  description: string,
  children?: ReactNode
}

function MyComponent({ imageUrl, title, description, className, children, ...props }: MyComponentProps)
{
  return (
    <div className={cx("mycomponent_wrapper", className)} {...props}>
      <img src={imageUrl} className="mycomponent_img" />
      <div className="mycomponent_content">
        <div className="mycomponent_title">{title}</div>
        <div className="mycomponent_desc">{description}</div>
      </div>
    </div>
  )
}

Okay, sure, much simpler. But let's see the CSS now. I'm using SASS syntax to get a simpler code. Assume all the variables matches the ones from the default theme in Soperio.

.mycomponent_wrapper {
    display: flex;
    flex-direction: column;
    background: $light_bg_color;
    color: $dark_text_color;
    border-radius: $default_radius_rounded;
    box-shadow: $default_shadow;

    &:hover {
        background: $light_hover_color;
    }

    .mycomponent_img {
        width: $spacing_48;
        height: 100%;
        background-size: cover;
        background-position: center;
        border-top-left-radius: $default_radius_rounded;
        border-top-right-radius: $default_radius_rounded;
        margin-bottom: $spacing_3;
    }

    .mycomponent_content {
        display: flex;
        flex-direction: column;
        padding-bottom: $spacing_3;
        padding-left: $spacing_4;
        padding-right: $spacing_4;
    }

    .mycomponent_title {
        @include typo_display5;
        padding: 0 $spacing_3 0 $spacing_3;
    }

    .mycomponent_description {
        @include typo_body1;
        color: $dark_secondary_color;
        font-weight: 400;
        margin-top: $spacing_3;
    }
}

@media(min-width: $breakpoint_md) {
    .mycomponent_wrapper {
        flex-direction: row;
        max-width: 33.33%;
        max-height: $spacing_48;
    }

    .mycomponent_img {
        width: $spacing_64;
        height: unset;
        max-height: $spacing_32;
        margin-bottom: 0px;
    }
}

Now, now, less simple isn't it! If you compare this code with the one used with Soperio, which one would you say is the most readable?

And this is quite a simple component. We don't have multiple breakpoints, nor different hover states on breakpoints, or disabled states for example.

The more styling, the more CSS code. Same is true with Soperio, but you add less lines of code than with CSS.

For me, the choice is obvious and I would choose Soperio over SASS. But maybe you don't see it that way so let me know if you disagree.

Conclusion

I'm personally convinced that when building SaaS apps, it's actually more readable to use Soperio CSS-IN-JS than CSS (or rather SASS/LESS as it would be even longer to write -and read- CSS...).

This post was about readability. I could write about some other advantages about Soperio properties over CSS, because readability is not everything we have to take into account, but that's for another blog post!

I created a new framework for React, and I'd love to know what you think about it 😀

Jonathan Gerbaud — Fri, 04 Nov 2022 09:00:00 +0000

Yes, yes, I know, yet another JS framework 😅

So what is it about? Well, first, it's a UI framework for React and React only.

And it's a CSS-IN-JS framework, much like MUI or Chakra UI for example.

So after a year of hard work, I'm happy to announce the release of Soperio UI and Valerya UI (wait, what? two frameworks? Well... yes 😅)

The story

Who cares? Right? Show us what it can do!

Alright... Here we go!

(you can still ready the story on the website if you're interested...)

So what does it do?

The main idea is to add CSSish properties to any HTML or React component.

So you can do something like this:

<div 
    bgColor="slate-100" 
    w="full"
    p="8"
    dflex
    flexRow
    placeContent="center"
>
    <div
        bgColor="white"
        rounded
        w="80"
        shadow
    >
        <img 
            src="/images/landscape.jpg" 
            w="full"
            h="40"
            objectFit="cover"
            roundedT
            alt="landscape"
        />
        <div
            py="4"
            px="5"
            fontWeight="400"
            textColor="slate-700"
        >
            <div 
                dflex
                flexRow
                flexWrap
                spaceX="2"
                mb="2"
            >
                <span rounded px="2" textColor="white" bgColor="blue-500">React</span>
                <span rounded px="2" textColor="white" bgColor="emerald-500">CSS-IN-JS</span>
                <span rounded px="2" textColor="white" bgColor="pink-500">UI</span>
            </div>

            <p>
                This is a sample card designed with <span textColor="sky-500" fontWeight="500">Soperio</span>. You can see that I'm applying design props <span fontWeight="500" textDecoration="underline">directly on the HTML tags</span>. 
            </p>

            <p mt="2">
                Properties like margin top, horizontal and vertical padding, flex box, rounded corners, width, height, font weight, shadow, text decoration, text and background color are easily defined without the need to write silly CSS.
            </p>
        </div>
     </div>
</div>

This will create a card like this:

Now, this is an example of what you can do with Soperio. It would have been better, of course, to use components like Card and others to create this. But again, this is an example.

As you can see, I can freely add properties like px (horizontal padding), textColor, rounded (border-radius), w (width), mt (margin-top) and others to directly style my html tags without the need to use the style property or to apply any CSS class names.

But you can also do the same with any component:

import { SoperioComponent, ParentComponent } from "@soperio/react"

// A very simple component
function MyCustomComponent( { children, ...props } : SoperioComponent & ParentComponent)
{
    return (
        <div {...props}>
            {children}
        </div>
    )
}


// Now you can use your custom component like this
<MyCustomComponent 
    px="3" 
    bgColor="sky-500" 
    textColor="white"
>   
    Easily work with custom components
</MyCustomComponent>

Now, styling components becomes much easier!

Theme values

You might have also noticed from the code earlier than I'm not using units such as px, em, pt, or even hexadecimal colors.

That's because the values from the example comes from a configuration theme file.

This theme, as well as the properties, have mostly been inspired by TailwindCSS. So if you're familiar with Tailwind, you should not be too surprised here.

It doesn't mean that you can't use a custom value like 24px or #FF0000 though. Soperio is flexible enough to let you do what you want.

Modern features

Soperio supports modern features like dark mode, RTL, theming, and responsive design.

And more

There's more to Soperio than this quick blog post can describe.

I invite you to check out the documentation at https://soperio-ui.com for more information.

Note that Soperio does not ship with any components (like buttons, cards, modals, avatars, etc...). That's why I created a separated framework, Valerya UI, that is built on top of Soperio.

Let me know what you think about Soperio! 😉