DEV Community: Emiliano Bucci

Css only fullscreen element

Emiliano Bucci — Tue, 28 Sep 2021 14:25:33 +0000

Hi! I wanted to share with you my solution to a well known headache during sites development: fullscreen hero image with only CSS.

After spending a lot of time on it, and reading a lot, i came up with a pretty working solution (i wouldn't say a 100% working solution) but yet a solid one:

.fullscreen-wrapper {
  width: 100%;
  height: 100vh;
  /** mobile non iOS devices */
  @media (hover: none) and (pointer: coarse) {
    height: calc(100vh - 56px);
    @media (orientation: landscape) {
      min-height: 100vh;
      height: auto;
    }
  }
  /** iOS devices */
  @supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
    @media (orientation: landscape) {
      min-height: auto;
      height: -webkit-fill-available;
    }
  }
}

Let me know what you think and if it works!

Another react-spring based component: react-spring-dialog

Emiliano Bucci — Thu, 29 Apr 2021 10:40:21 +0000

Hi to all! Today I'm happy to announce the release of my second open source library. Yes, it's another dialog component I know but, if you like, take a look at it :)

Features

Excelent performances thanks to react-spring.
Accessibility ready thanks to the use of focus-trap-react among other things.
Easy to style and to configure: no more headaches or hacky things trying to make the Dialog looks like we want.

How to use it

import { Dialog } from 'react-spring-dialog'

export function Component() {
  const [isActive, setIsActive] = useState(false)

  return (
    <Dialog isActive={isActive} onClose={() => setIsActive(false)}>
      <div>Dialog content</div>
      <button onClick={() => setIsActive(false)}>CLOSE</button>
    </Dialog>
  )
}

Repository

Visit here

Official documentation

Visit here

Accessible, easy to use, smooth animations, and fully configurable!

React spring carousel js

Emiliano Bucci — Sun, 20 Dec 2020 18:30:23 +0000

What I built

react-spring-carouse.js is a React carousel powered by react-spring and react-use-gesture.

App Link

https://react-spring-carousel-js.emilianobucci.com/

Description

react-spring-carouse.js is a new way of approach the implementation of a carousel. We give you the API, and you decide where to put the carousel elements and how interact with it. It embraces the philosophy of Headless UI (not 100% of course, but almost).

Link to Source Code

https://github.com/Emiliano-Bucci/react-spring-carousel-js
https://www.npmjs.com/package/react-spring-carousel-js

Permissive License

MIT License

Background

I decided to build this library - specifically following this new approach in carousel's world - because many times, while trying to implement a carousel in my site/app - i never felt totally free. I always had the feeling that i had to do some dirty hack to adapt the carousel to work in a decent way in my UI, and of course i never like that. I never like the idea of having to override stuff, or not being totally free of implement my own components in the way i needed to.

The second point was that animations never feel very natural, always having the feeling that something wasn't quite right, even if i wasn't able to tell specifically what.

How I built it

I had to admit, this is my first open source library :D I built it using the package of create-react-library -> https://www.npmjs.com/package/create-react-library.

The main technologies that power this carousel are react-spring and react-use-gesture.

Additional Resources/Info

https://www.react-spring.io/
https://use-gesture.netlify.app/