DEV Community: Altin Selimi

Creating a library for both React and Vue 🤝

Altin Selimi — Wed, 26 Mar 2025 10:30:46 +0000

Getting to re-know an old friend 🫂

A while ago, I started developing with React (again). Coming from Vue, it was quite a shift in terms of building frontend UIs.

Parent-to-child data flow, component rendering intricacies, lifecycle hooks, and context for state management to avoid prop drilling—it was a lot to grasp just from reading documentation.

So, I decided that my next library—whenever that happened—would be built to support both Vue and React. It should give me a much better understanding on direct differences between the two.

The Idea: A Panes library 🪟

I really like Linear’s user experience—it's intuitive yet unobtrusive. You might never think to drag the panes, but if you try, it just works. Resize the window? The right pane collapses automatically. "It just works."

So I decided that's what I'm going to build, a panes library that gives you the tools to build such a dashboard. Which is now TurtlePanes.

Initial Exploration 👀

I liked React’s Context API—it prevents prop drilling and serves as a shared state. Perfect.

So the blueprint was simple: composable components that relied on a shared context. In theory, a great idea.

I started with Vue, and the initial implementation was quick, but I was writing too much business logic inside Vue components. Eventually, I moved most logic into the context object, keeping the components clean.

The Vue version was working great, but then I hit a major roadblock while porting it to React.

Vue vs. React Reactivity Differences ⚖️

Vue has a reactive function that transforms an object into a reactive one, allowing the framework to track changes and trigger re-renders. React, however, handles reactivity differently. A state variable must be updated using its corresponding setter function—otherwise, no re-render occurs.

The JavaScript object itself updates, but React won’t reflect the updates.

const [sharedState, setSharedState] = useState({ count: 1 });
sharedState.count++; // 🙅🏻‍♂️ Updates the object, but won't trigger a re-render
setSharedState((prev) => ({ ...prev, count: prev.count + 1 })); // ✅ Correct approach

I explored libraries like Valtio and Mitosis, but neither fit perfectly. I didn’t want to add a peer dependency for Valtio, and Mitosis didn’t work well with a shared context.

Instead of maintaining separate contexts for Vue and React, I decided to use a single core state and “hack” React’s update mechanism by listening for changes on a JavaScript object.

The Solution: A Shared Proxy-Based State 💡

The core state provides methods to create a state object and a proxy wrapper that listens for changes, triggering updates as needed. (As a bonus, Vue’s reactivity mechanism actually works in a similar way, using Proxies to track changes and update the UI automatically.)

// context.ts
export const createState = () => ({ count: 0 });
export const createActions = (state) => ({
    updateCount: () => state.count++
});
export const createProxyState = (state, onUpdateCallback) => {
    return new Proxy(state, {
        set(target, prop, value) {
            target[prop] = value;
            onUpdateCallback();
        }
    });
};

With these three functions, we should now have everything to share the state between the two.

Vue Adapter

Now we need to create a Vue adapter, which uses 'reactive' hook to turn it into a digestable object for Vue components.

// vue-state-adapter.ts
import { createState, createActions } from './context.ts';
import { reactive, provide, inject } from 'vue';

export const createContext = () => {
  const state = reactive(createState());
  const actions = createActions(state);
  return { state, ...actions };
};

<script>
// Usage in a Vue component
import { createContext } from "./vue-state-adapter";
const context = createContext();
provide("context", context);
</script>

<template>
  <div>
    <p>Count: {{ context.state.count }}</p>
    <button @click="context.updateCount">Increment</button>
  </div>
</template>

React Adapter

And likewise for React, we need to make sure the UI updates everytime something changes in the proxied state.

// react-state-adapter.tsx
import { createContext, useRef, useState, useMemo, useContext } from "react";
import { createState, createProxyState, createActions } from "@turtle-panes/core";

const StateContext = createContext(undefined);

export const StateProvider = ({ children }) => {
  const [triggerRerender, setTriggerRerender] = useState(0);
  const state = useRef(null);
  if (!state.current) {
    const initialState = createState();
    state.current = createProxyState(initialState, () => setTriggerRerender((prev) => prev + 1));
  }
  const actions = useRef(null);
  if (!actions.current) {
    actions.current = createActions(state.current);
  }

  const contextValue = useMemo(() => {
    return { state: state.current, ...actions.current };
  }, [triggerRerender]);

  return <StateContext.Provider value={contextValue}>{children}</StateContext.Provider>;
};

export const useStateContext = () => {
  const context = useContext(StateContext);
  if (context === undefined) {
    throw new Error("useStateContext must be used within a StateProvider");
  }
  return context;
};

Using It in a React Component

import { StateProvider, useStateContext } from "./react-state-adapter";

const Counter = () => {
  const { state, updateCount } = useStateContext();
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={updateCount}>Increment</button>
    </div>
  );
};

const App = () => (
  <StateProvider>
    <Counter />
  </StateProvider>
);

export default App;

Conclusion 🙆🏻‍♂️

This approach provides a framework-agnostic way to manage state across React and Vue while keeping a unified core. The proxy trick ensures React detects state changes without requiring additional dependencies. The result? A lightweight, scalable solution that “just works.”

I look forward to building more libraries like this, and maybe even start with a core library that uses vanilla JS, and then have framework adapters built around that instead.

Let me know if there's something I missed, or some feedback you might have, whatever it may be.

You can find the library here: http://github.com/altinselimi/turtle-panes

Draggable Content Cards on the Web

Altin Selimi — Sun, 28 Jun 2020 18:20:52 +0000

Draggable content. cards. on. the. web. But why?

Good question. Well, for starters, its getting popular on mobile devices. You know, with iOS 13 or 14 (I've lost track), they were introduced to native Apple applications, for example: Apple Music, Stocks etc.

But Altin, it getting popular doesn't mean nich. Remember earth being flat and all ? That was pretty popular.

Fair enough.

Lets look from another perspective.
Good UX-es are often matters of creating solid view hierarchies. Whats important, what is importanter and what is the most importantest... Based on that, you can make informed decisions on what gets shown where.

But what if you get to a stalemate position. What if both views you need to show to the user are the most importantest. In a desktop or tablet, that would be easy. There's enough screen real estate. But this article is about a pattern only seen on mobile devices.

Using buttons to toggle between said views is not going to be very intutive, and as such a lot of users will never discover them.

So now you might understand why Apple choose to have a draggable Now Playing section sitting at the bottom of their Music app. Or why they have the Business News section always visible to the user in the Stocks app. Google uses a similar pattern in their Google Maps app too.

The how

Now that we are done with explaining why we might want to use this pattern, lets get our hands dirty and see how difficult it is to implement this on the modern day web.

Step 1 - Start Small

From the get go, we can see that we are going to need 2 cards. The main content one, and the draggable content one. Lets get rolling:

<body>
  <div class="main-card"></div>
  <div class="draggable-card"></div>
</body>

.main-card {
  background-color: var(--red);
  width: 100%;
  height: 100%;
}
.draggable-card {
  background-color: var(--blue);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 70%;
  min-height: 20vh;
}

That doesn't look anything like draggable card on top of a content. Lets add the thumb and style it up a bit:

...
<div class="draggable-card">
  <div class="draggable-thumb-wrapper">
    <div class="draggable-thumb"></div>
  </div>
</div>

.draggable-card {
 ...
 border-radius: 1rem;
}
.draggable-thumb-wrapper {
  display: flex;
  align-items: center;
  padding: 10px 0px;
  cursor: pointer;
}
.draggable-thumb {
  margin: auto;
  border-radius: 50px;
  width: 35px;
  height: 4px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 0px 0px 1px white;
}

Step 2: Event Listeners.

There are 3 event listeners that we are going to use in order to control the blue card's position in the Y axis. Their naming is pretty self-explanatory. But I'd still rather give a quick intro:

touchstart - fires when touch starts on this particular element.
touchmove - fires when there's a touch event going through said element. It doesn't neccesarily have to start on this particular element. It's enough the touch passes through.
touchend - fires when touch ends on this particular element. Again, doesn't need to have started on this element, its enough it ends here.

<div 
     class="draggable-thumb-wrapper"
     ontouchstart="startDraggingHandler(event)"
     ontouchmove="draggingHandler(event)"
     ontouchend="stopDraggingHandler(event)"
>
  ...
</div>

Below the body tag of our html file, add a <script> tag with the following contents:

function startDraggingHandler(event) {
  const { clientY } = event.touches[0];
}
function draggingHandler(event) {
  const { clientY } = event.touches[0];
}
function stopDraggingHandler(event) {
  const { clientY } = event.changedTouches[0];
}

clientY tells us exactly where the touch event is occuring/has occured, relative to viewports height.

As of now, the draggable part is still not draggable, but we've laid out a very good foundation.

Step 3: Putting the drag in draggable

We are going to use transform CSS property to drag the blue card up and down the Y axis. We could also do this using the top property, but that would look very glitchy since calculations and layouts would happen in main thread. Transform on the other hand, offloads its work to the GPU thread, guaranteeing us the utmost main thread performance.

Because of that, we need to introduce a variable in our JS code which will hold the transform value.

let yDragValue = 0;
...

Remember when I talked about touchmove and touchend I mentioned that they get fired regardless of where the touch started. To take care of that we need another variable.

let yDragValue = 0;
let isDragging = false;
...

Last but not least, we need to keep track of where the touch started, which we can then use to calculate how much the card should move up.

let yDragValue = 0;
let isDragging = false;
let initialDragClientY = 0;
...

Lets now put these variables to use:

let yDragValue = 0;
let isDragging = false;
let initialDragClientY = 0;

function startDraggingHandler(event) {
  isDragging = true;
  const { clientY } = event.touches[0];
  initialDragClientY = clientY;
}
function draggingHandler(event) {
  if(!isDragging) return;
  const { clientY } = event.touches[0];
  yDragValue = clientY - initialDragClientY;
}
function stopDraggingHandler(event) {
  if(!isDragging) return;
  isDragging = false;
}

Okay, we got all the things we need. We now need to update the position of the element by using the transform CSS property.

...
const draggableElement = document.querySelector('.draggable-card');
...
function draggingHandler(event) {
  ...
  draggableElement.style.transform = `translateY(${yDragValue}px)`;
}

Lets try it out:

It feels a bit too riggid though. Lets ease it out a bit:

.draggable-card {
  ...
  transition: transform 0.2s ease-out;
}

Setting will-change to transform in our draggable card element, will further enhance the performance.

Wrapping it up

There is still a lot of stuff to be done here. But these all fall under progressive enhancments. I am referring to things like: snap in position, cancel the drag, handling the yDragValue when the dragging starts at the top, after its been dragged from the bottom.

For all of these, you can check out my github repo, where I've done something similar to the Stocks iOS app with all the snapping and dragging taken care of. Its vanilla javascript and pretty easy to read too.

All things considered, the experience is pretty decent. There's one thing I would wish to add to this implementation, and that is a spring type animation. But that's a bit harder to achieve in vanilla JS. If you are using React, you can use libraries like react-spring or framer-motion to achieve that.

Follow me on Twitter & Github to stay updated !