DEV Community: xavier gonzalez

Notifications in JavaScript: Introducing notify-zh 🔔

xavier gonzalez — Sun, 07 Sep 2025 21:30:13 +0000

Hey everyone!
https://notify.piratacode.com/

I want to share a new notification library I've created with you: notify-zh. I've always looked for a simple and lightweight way to display notifications in my JavaScript projects, and since I couldn't find anything that fit my needs, I decided to build it myself.

What does notify-zh do?
notify-zh is a very easy-to-use and customizable library for showing simple notifications in your web applications. Its main goal is to be as minimalist and lightweight as possible without sacrificing important features like:

Simple setup: You don't need much code to get started.

Multiple positions: Show notifications in different corners of the screen.

Customizable themes:
Choose from predefined themes or create your own.

Configurable duration: Control how long the notification remains visible.

Close action: Users can manually close the notification.

Why use notify-zh?
If you're looking for a quick and efficient solution to add notifications to your project without a heavy library, notify-zh is an excellent choice. It's perfect for:

Small and medium-sized projects.

Prototypes and MVPs (Minimum Viable Products).

Projects where performance is a priority.

How to get started?
Installation is simple with npm:

Bash

npm install notify-zh

Then, you can import and use it in your project:

JavaScript

import { showNotification } from 'notify-zh';

// Success notification
showNotification('Your action has been completed!', {
  type: 'success',
  position: 'top-right',
  duration: 3000
});

// Error notification
showNotification('An error occurred. Please try again.', {
  type: 'error',
  title: 'Error'
});

I'd love to hear your feedback!
notify-zh is available on npm. I'd love for you to try it out in your projects and give me your feedback! You can find the full documentation on its npm page: https://www.npmjs.com/package/notify-zh
or
https://notify.piratacode.com/
Thanks for reading, and I hope notify-zh is useful to you! 😊

react router v5 multiple layouts

xavier gonzalez — Sun, 01 Mar 2020 18:13:46 +0000

Repository Github

React Router V5 multiple layouts

If you want to test the project you can go to this or clone the repository

  yarn or npm install

with this router structure the re-rendering that is caused when changing routes is avoided

In this demo we have two layouts:

Admin
Main

The routes

/
/about
/login
/admin
/admin/setting

Example file router


import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

import Main from '../containers/layouts/Main'
import MainAdmin from '../containers/layouts/MainAdmin'

// views
import About from '../containers/views/Main/About'
import Home from '../containers/views/Main/Home'
import Login from '../containers/views/Main/Login'

// admin Views

import Dashboard from '../containers/views/Admin/Dashboard'
import Setting from '../containers/views/Admin/Setting'


export default () => {

  return (
    <Router>
      <Switch>
        <Route path='/login' component={Login} />


        <Route path='/admin/:path?' exact>
          <MainAdmin>
            <Switch>
              <Route path='/admin' exact component={Dashboard} />
              <Route path='/admin/setting' component={Setting} />
            </Switch>
          </MainAdmin>
        </Route>

        <Route>
          <Main>
            <Switch>
              <Route path='/' exact component={Home} />
              <Route path='/about' component={About} />
            </Switch>
          </Main>
        </Route>


      </Switch>
    </Router>
  )

}

structure folder routers


  └── src
      ├── components
      │   └── Common
      │       ├── Header
      │       └── Footer
      ├── containers
      │   ├── views
      │       ├── Main.jsx
      │       └── MainAdmin.jsx
      │   └── views
      │       └── Admin
      │           ├── Dashboard
      │           └── Setting
      │       └── Main
      │           ├── About
      │           ├── Home
      │           └── Login
      ├── routes
      │   └── index.js

React Funnel

xavier gonzalez — Thu, 05 Dec 2019 03:19:45 +0000

Hi, I want to share a library that I am building. If you find a mistake I would like to be told to improve the library and as a developer.

Install

npm install --save funnel-react

or

yarn add funnel-react

Test Library

Usage


import { Funnel } from 'funnel-react';

Simple example


<Funnel
  height={252}
  colors={[ '#1890FF', '#BAE7FF' ]}
  valueKey='quantity'
  width={800}
  data={data} />

Render prop example

const data = [
  {
      "label": "Aceptados",
      "quantity": 135
  },
  ...{}
]

  <Funnel
  labelKey='label'
  height={252}
  colors={[ '#1890FF', '#BAE7FF' ]} // array or string : 'red' || '#666'
  valueKey='quantity' 
  width={800}
  displayPercent={true}
  data={data} />

props	Type	Default Value	Options
labelKey	string
colors	array or string	['#FF4589', '#FF5050']
valueKey	string
width	number	container width
displayPercent	boolean	false	false / true
data	array