DEV Community: Bram Hammer

Yet Another Horizontall Scroller ( in react)

Bram Hammer — Thu, 24 Nov 2022 23:18:15 +0000

YAH-Scroller

Yet another horizontal scroller for React.
A simple and lightweight component that allows you to scroll horizontally through a list of items on both mobile and desktop with a small 'stretch' effect.

I couldn't find something fast enough so I made one myself it's simple and effective. Do you encounter any issues please let us know!

Installation:

npm install yah-scroller --save-dev

yarn add -D yah-scroller

Usage :

Add YahScroller to your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { YahScroller } from 'yah-scroller'
import 'yah-scroller/assets/style.scss'; 
// you can include the css version if needed

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
    <React.StrictMode>
        <div>
            <h2>Simple scroller</h2>
            <YahScroller className="horizontal-scroll">
                <div key={'c1'} className={'category'}>Category 1</div>
                <div key={'c2'} className={'category'}>Category 2</div>
                <div key={'c3'} className={'category'}>Category 3</div>
                <div key={'c4'} className={'category'}>Category 4</div>
                <div key={'c5'} className={'category'}>Category 5</div>
                <div key={'c6'} className={'category'}>Category 6</div>
            </YahScroller>
        </div>
    </React.StrictMode>,
)

You like it? Or want something to be added?

Please let us know!
What I plan to add:

different version to use styled components of someone whishes to use it
more customisations possible
switch between vertical or horizontal
example page(s)

TipTap image resize extension

Bram Hammer — Tue, 28 Jun 2022 23:09:36 +0000

We've worked on various projects which made use of the TipTap text editor. It's an opensource editor with quite a few extensions and built-in options.. However (for us), it's missing one important feature... Image resizing!

That's why we made a script that extends the normale image module and adds the resize feature. We will explain how to install and maybe change some looks to your liking.
(sorry Vue and other frameworks, React only for now)

Installation

Run npm i tiptap-imagresize or yarn add tiptap-imagresize
After that import the ImageResize module where you initialise your editor. If the image module exists replace it with the ImageResize module, otherwise just add it.

const editor = useEditor({
        extensions: [ StarterKit, ImageResize],
        content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
    })

Options

Since I try to make this post as simple as possible i will only cover the resize icon..
You can alter it by adding the configuration function to the ImageResize extension. I will use React-icons as example on how to use your own icon for the resize icon.

import {GrBottomCorner} from 'react-icons/gr'

const editor = useEditor({
        extensions: [ StarterKit, ImageResize.configure({resizeIcon: <GrBottomCorner/>})],
        content: '<p>Hello World!</p><image-resizer src="https://example.com/image.jpg"></image-resizer>',
    })

Simply passing content in the resizeIcon will render anything you want in the corner.

Styling

Since there are quite a few options to solve the styling part I gave the general (S)CSS that's used in our repository/readme. I will also include it below.
If you work with scss or css files you can use either of the codes below.. For styles or other solutions you will have to convert this css to that or create your own styling for it.

SCSS

.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
    .resize-trigger {
      position: absolute;
      right: -6px;
      bottom: -9px;
      opacity: 0;
      transition: opacity .3s ease;
      color: #3259a5;
    }
    &:hover .resize-trigger {
      opacity: 1;
    }
  }

CSS

.image-resizer {
    display: inline-flex;
    position: relative;
    flex-grow: 0;
 }
.image-resizer .resize-trigger {
  position: absolute;
  right: -6px;
  bottom: -9px;
  opacity: 0;
  transition: opacity .3s ease;
  color: #3259a5;
}
.image-resizer:hover .resize-trigger {
  opacity: 1;
}

That's it!

That's all you need to get this working! Miss something or found some issues? Let me know in my repository and I will try to respond a.s.a.p!

Good luck all of you!

React (Native?) project

Bram Hammer — Tue, 24 May 2022 22:12:19 +0000

React Native for web?

At the moment we are migrating our Symfony only project to React frontend and symfony backend and plan to extend our platform with a React Native app for Android and IOS.

All is progressing as we would like, no issues so far and we're actually on track... However; this evening I started thinking why only reuse certain components (partially) if we can maybe reuse over 95% of the code or maybe 100%!?

Outdated or no clear examples

So I went online and did a little research to see if it would benefit us to make the web app also in React Native... Sadly enough there's no clear answer and quite a bit of information is outdated..
At this point I want to hear some opinions or even better, real examples of why you should or shouldn't do this?

I saw some options using expo or React Native Web etc..

But I want to hear your opinions and experiences!

Resources

Header image: Hackr - React vs React Native

Why we might stop with Product Hunt

Bram Hammer — Wed, 02 Mar 2022 02:21:03 +0000

Since it's important to also share things that didn't work as expected...

On 1 March 2022, we launched our update on Producthunt: https://www.producthunt.com/posts/payrequest-4-0-1

the numbers are disappointing:

15 Upvotes
1 reply (but from a loyal customer)
Not much traffic/conversions (we still investigate these numbers)

What we did to promote and try to make our launch successful:

Create a custom logo
Create custom screenshots
Write a nice first reply
Use our 3 Twitter accounts (2000+ followers together)
Send an email to 6000+ businesses
Promote it on Facebook groups & other platforms.

We have come to the conclusion that it takes too much energy & time to set up a product hunt launch, in the future, we will spend our energy and time on more important tasks from which we get enough recognition and growth.

We are still grateful for our previous launches which have yielded enough interaction and good feedback. Maybe we did something wrong on our end, what is your experience with ProductHunt and do you maybe have some tips and tricks you want to share with us and other people in terms of promoting your (side) project on producthunt or in general?