DEV Community: Naxrul Ahmed

Dboun

Naxrul Ahmed — Sat, 04 Jan 2025 07:01:35 +0000

The dboun function is a utility designed to limit the rate at which a function is executed. It ensures that the provided function (fn) is called only after a specified delay (delay) has elapsed since the last invocation. By default, the delay is set to 400 milliseconds.

This is particularly useful for handling events that fire frequently, such as resizing, scrolling, or typing, by preventing the provided function from being called excessively.

Usage Example

Scenario: Search Input with Debounce

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

In this example:

handleSearch is the function that handles the search logic.
debouncedSearch ensures that handleSearch is executed only after 300 milliseconds of inactivity in typing.

Parameters

fn (Function): The function to be executed after the debounce delay.
- This is the callback function that will be invoked after the specified delay.
delay (Number, optional): The number of milliseconds to wait before invoking fn. Defaults to 400 milliseconds.
- This determines the debounce interval.

Returns

The dboun function returns a new debounced version of fn. The returned function delays the invocation of fn until after delay milliseconds have passed since the last time the returned function was called.

How It Works

When the returned function is called, it clears any existing timer set for the function (clearTimeout(timeout)).
A new timer is then set (setTimeout) to invoke fn after the specified delay.
If the returned function is called again before the delay period ends, the previous timer is cleared and reset.

Practical Applications

Input Handling: Debouncing prevents excessive execution of event handlers when users type in an input field.
Resize Events: Manage performance by debouncing window resize event handlers.
Scroll Events: Avoid performance bottlenecks by controlling how often scroll event handlers are executed.

Notes

If you need immediate execution followed by a delay (throttle-like behavior), this function does not provide that functionality out of the box.
Always ensure delay is appropriate for the use case to balance responsiveness and performance.

Browser Compatibility

The dboun function uses modern JavaScript/TypeScript features, making it compatible with most modern environments. For older environments, consider transpiling the code.

Testing

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

Devnax

Naxrul Ahmed — Thu, 02 Jan 2025 12:39:55 +0000

👋 Hi there, I'm Devnax!

I'm a passionate Full-Stack Web Developer and an entrepreneur. With a deep interest in building scalable web applications, I specialize in creating efficient, elegant, and user-friendly solutions.

🚀 Languages and Tools I Use

🛠️ Open Source Projects

Explore All

🌟 Currently Working

Name	Description
PIE Academy	This is a Learning Management System (LMS) that I built from the ground up, leveraging modern web technologies. The platform is powered by Next.js, Express, AWS EC2, RDS and Amplify.
Study Abroad	This is designed to simplify the university application process. this is a streamlined platform built with Next.js, Socket.io, AWS EC2, RDS, S3.

⚡️ Where to find me

Thanks for visiting my profile! Feel free to reach out if you want to connect or collaborate on a project. Let's build something amazing together!

Pretty Class

Naxrul Ahmed — Thu, 02 Jan 2025 10:10:53 +0000

Pretty Class

pretty-class is a lightweight utility package designed to simplify the process of generating dynamic class names in JavaScript and TypeScript applications. It provides a flexible and intuitive way to conditionally combine class names based on different input types.

Installation

To install pretty-class, use npm or yarn:

npm install pretty-class

yarn add pretty-class

Usage

Importing the Package

import prettyClass from 'pretty-class';

Function Signature

export type prettyClassTypes = string | Record<string, boolean> | prettyClassTypes[] | undefined | null | false;
const prettyClass: (...args: prettyClassTypes[]) => string;

Parameters

args: A variable number of arguments of type prettyClassTypes. Each argument can be:
- A string: Adds the string directly to the class list.
- An object with keys as class names and values as boolean: Includes the key if the value is true.
- An array: Recursively processes the array elements.
- undefined, null, or false: Ignored in the output.

Returns

A string containing the concatenated class names.

Example Usage

Basic String Input

const result = prettyClass('class1', 'class2');
console.log(result); // Output: "class1 class2"

Conditional Classes

const result = prettyClass({ 'class1': true, 'class2': false, 'class3': true });
console.log(result); // Output: "class1 class3"

Nested Arrays

const result = prettyClass(['class1', { 'class2': true }, ['class3', { 'class4': false }]]);
console.log(result); // Output: "class1 class2 class3"

Mixed Inputs

const result = prettyClass('class1', { 'class2': true }, ['class3', null, false]);
console.log(result); // Output: "class1 class2 class3"

Benefits

Lightweight: Minimal code footprint.
Flexible: Supports various input types.
Recursive: Handles nested arrays gracefully.
Typed: Fully typed for TypeScript users.

License

pretty-class is licensed under the MIT License. See the LICENSE file for more details.

For contributions, issues, or feature requests, visit the GitHub repository.

React State Bucket

Naxrul Ahmed — Thu, 02 Jan 2025 10:09:40 +0000

React State Bucket

Effortlessly manage React application states with react-state-bucket, a lightweight yet powerful state management library.

🚀 Features

Global State Management: Manage state across your entire React application with ease.
CRUD Operations: Create, Read, Update, and Delete state values effortlessly.
Multiple Storage Options: Store state in "memory," "session storage," "local storage," or "URL parameters."
Reactivity: Automatically update components when the state changes.
Custom Hooks: Seamlessly integrate with React’s functional components.
TypeScript Support: Fully typed for a better development experience.
Lightweight: Small bundle size with no unnecessary dependencies.

📦 Installation

Install the package via npm or yarn:

# Using npm
npm install react-state-bucket

# Using yarn
yarn add react-state-bucket

🔧 Setup and Usage

Step 1: Create a State Bucket

Define your initial state and actions:

import { createBucket } from 'react-state-bucket';

const initialState = {
  count: 0,
  user: 'Guest',
};

export const useGlobalState = createBucket(initialState);

Step 2: Use the State Bucket in a Component

Access state and actions in your React components:

import React from 'react';
import { useGlobalState } from './state';

const App = () => {
  const globalState = useGlobalState();

  return (
    <div>
      <h1>Global State Management</h1>
      <p>Count: {globalState.get('count')}</p>
      <button onClick={() => globalState.set('count', globalState.get('count') + 1)}>Increment</button>
      <button onClick={() => globalState.delete('count')}>Reset Count</button>
      <pre>{JSON.stringify(globalState.getState(), null, 2)}</pre>
    </div>
  );
};

export default App;

🌟 Advanced Features

Using Multiple Buckets

const useUserBucket = createBucket({ name: '', age: 0 });
const useSettingsBucket = createBucket({ theme: 'light', notifications: true });

function Profile() {
  const userBucket = useUserBucket();
  const settingsBucket = useSettingsBucket();

  return (
    <div>
      <h1>User Profile</h1>
      <button onClick={() => userBucket.set('name', 'John Doe')}>Set Name</button>
      <button onClick={() => settingsBucket.set('theme', 'dark')}>Change Theme</button>
      <pre>User State: {JSON.stringify(userBucket.getState(), null, 2)}</pre>
      <p>Current Theme: {settingsBucket.get('theme')}</p>
    </div>
  );
}

Persistent Storage Options

const usePersistentBucket = createBucket(
  { token: '', language: 'en' },
  { store: 'local' }
);

function PersistentExample() {
  const persistentBucket = usePersistentBucket();

  return (
    <div>
      <h1>Persistent Bucket</h1>
      <button onClick={() => persistentBucket.set('token', 'abc123')}>Set Token</button>
      <p>Token: {persistentBucket.get('token')}</p>
    </div>
  );
}

Reusing State Across Components

import React from 'react';
import { createBucket } from 'react-state-bucket';

const useGlobalState = createBucket({ count: 0, user: 'Guest' });

function Counter() {
  const globalState = useGlobalState();

  return (
    <div>
      <h2>Counter Component</h2>
      <p>Count: {globalState.get('count')}</p>
      <button onClick={() => globalState.set('count', globalState.get('count') + 1)}>Increment Count</button>
    </div>
  );
}

function UserDisplay() {
  const globalState = useGlobalState();

  return (
    <div>
      <h2>User Component</h2>
      <p>Current User: {globalState.get('user')}</p>
      <button onClick={() => globalState.set('user', 'John Doe')}>Set User to John Doe</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Global State Example</h1>
      <Counter />
      <UserDisplay />
      <pre>Global State: {JSON.stringify(useGlobalState().getState(), null, 2)}</pre>
    </div>
  );
}

export default App;

📘 API Reference

`createBucket(initial: object, option?: BucketOptions)`

Creates a new bucket for managing the global state.

Parameters

Name	Type	Description
`initial`	`object`	Initial state values.
`option`	`object?`	Optional configuration (default: memory).

`BucketOptions`

BucketOptions allows you to configure how and where the state is stored. It includes:

Property	Type	Description
`store`	`'memory', 'session', 'local', 'url'`	Specifies the storage mechanism for the state.

Returned Functions

State Management

Function	Description
`set(key, value)`	Sets the value of a specific key in the state.
`get(key)`	Retrieves the value of a specific key from the state.
`delete(key)`	Removes a key-value pair from the state.
`clear()`	Clears all state values.
`getState()`	Returns the entire state as an object.
`setState(state)`	Updates the state with a partial object.

Change Detection

Function	Description
`isChange(key)`	Checks if a specific key has been modified.
`getChanges()`	Returns an array of keys that have changed.
`clearChanges()`	Resets the change detection for all keys.

🤝 Contributing

Contributions are welcome! Please check out the contribution guidelines.

📄 License

This project is licensed under the MIT License.

📞 Support

For help or suggestions, feel free to open an issue on GitHub or contact us via devnaxrul@gmail.com.

Makepack

Naxrul Ahmed — Thu, 02 Jan 2025 10:03:42 +0000

Makepack

MakePack is a command-line interface (CLI) tool that helps you to quickly set up, build, and manage JavaScript, TypeScript, React, and React-TypeScript libraries for use in npm projects. With just a few simple commands, you can generate your own libraries, start a development server, or build and publish your project to the npm repository.

Installation

To install MakePack globally, run the following command:

npm install -g makepack

This will allow you to use the makepack command anywhere in your terminal.

Commands

`create`

The create command is used to create a new library project. It initializes the project structure, configures essential files, and sets up the environment for you to start working on your library.

Usage

makepack create

Description

Creates a new library project by setting up the necessary configurations and boilerplate files.

This command will guide you through the initial setup for your library.

`serve`

The serve command starts a development server for your library, providing you with a live-reload environment where you can test and iterate on your library in real-time.

Usage

makepack serve [options]

Options

-p, --port <number>

Port number (optional) (default is 5000).
-e, --root <file>

Root file (optional) (default is serve.jsx or serve.tsx). The entry point for your application. Specify the main JavaScript/TypeScript file to start the server.

Description

Starts a local development server for testing and debugging your library.

Example:

makepack serve --port 4000 --root src/index.ts

`pack`

The pack command is used to build your library and optionally publish it to the npm repository. This command compiles your code into a distributable format and prepares it for sharing with others.

Usage

makepack pack [options]

Options

-e, --entry <file>

Entry file or directory (default is src/**/*.{tsx,ts,js,jsx}).

Specify the entry file or use a glob pattern to select the files to include in your library.
-p, --publish

Publish the project to the npm repository (default is false).

Add this flag if you want to publish the library to npm after building it.

Description

Builds the project by compiling and bundling your library.
Optionally publishes the library to the npm repository.

Example:

makepack pack --entry src/index.ts --publish

This will compile the project from src/index.ts and then publish the library to npm.

Example Workflow

Create a new project:

makepack create

Start the server for development:

makepack serve --port 4000 --root index.tsx

Once you're ready to build and publish your library:

makepack pack --entry src/**/*.{tsx,ts,js,jsx} --publish

This will build your library and publish it to npm.

🤝 Contributing

Contributions are welcome! Please check out the contribution guidelines.

📄 License

This project is licensed under the MIT License.

📞 Support

For help or suggestions, feel free to open an issue on GitHub or contact us via devnaxrul@gmail.com.

React Rock

Naxrul Ahmed — Thu, 02 Jan 2025 10:02:14 +0000

React Rock

React-Rock is a lightweight package for managing global state in React applications. It simplifies handling data by providing a store with rows and metadata, while offering methods to perform CRUD operations and more. It enables easy integration with React components, making it an ideal solution for managing complex state in large applications.

Installation

To install the React-Rock package, run the following command in your project:

npm install react-rock

Features

Global Store Management: Manage rows and meta data in a global store.
CRUD Operations: Perform create, read, update, and delete operations on rows.
Meta Management: Set, get, and delete meta data.
Optimized Re-renders: Control component re-renders with the freeze option.
Class Component Support: Use the StoreComponent for integrating store data into class components.

Basic Example: Creating a Store and Adding Records

To create a new store and add a record, use the createStore function. Here's an example:

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<RowType, MetaType>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });

RowType Explained

When a row is created, it will have the following properties:

type RowType<Row> = Row & {
    _id: string;       // Unique identifier for the row
    _index: number;    // Index of the row in the store
    _observe: number;  // Internal property to track changes
}

Each row will include the original data (Row) and some additional properties like _id, _index, and _observe.

Methods

Here’s a table with all available methods and their descriptions:

Method	Description
`create(row, freeze?)`	Adds a new record to the store. Optionally, prevents re-rendering if `freeze` is `true`.
`createMany(rows, freeze?)`	Adds multiple records to the store. Optionally, prevents re-rendering if `freeze` is `true`.
`update(row, where, freeze?)`	Updates records based on the condition specified in `where`.
`updateAll(row, freeze?)`	Updates all records in the store. Optionally, prevents re-rendering if `freeze` is `true`.
`delete(where, freeze?)`	Deletes records based on the condition specified in `where`.
`move(oldIdx, newIdx, freeze?)`	Moves a record from one index to another.
`clearAll(freeze?)`	Clears all records from the store. Optionally, prevents re-rendering if `freeze` is `true`.
`getAll(args?)`	Retrieves all rows from the store.
`find(where, args?)`	Finds rows based on a condition specified in `where`.
`findFirst(where, freeze?)`	Finds the first row that matches the condition in `where`.
`findById(_id, freeze?)`	Finds a row by its `_id`.
`setMeta(key, value, freeze?)`	Sets a value for a specific meta key.
`getMeta(key, freeze?)`	Retrieves the value of a specific meta key.
`getAllMeta(freeze?)`	Retrieves all meta data from the store.
`deleteMeta(key, freeze?)`	Deletes a specific meta key.
`clearMeta(freeze?)`	Clears all meta data from the store.

Example of the `find` Method

The find method allows you to search for rows in the store based on specific conditions:

const foundUsers = users.find({ name: { equalWith: 'John Doe' } });
console.log(foundUsers);

Re-rendering in React Components

React-Rock optimizes re-renders by offering a freeze mechanism. When a store update occurs and the freeze option is enabled, React components that access the store using methods like find or findFirst will not automatically re-render. This gives you control over when your components should re-render, improving performance in large applications.

WhereType

The WhereType is used to specify conditions when querying rows. It defines a query structure for filtering rows.

QueryValueType

The QueryValueType is used within WhereType to define possible conditions for querying:

Property	Description
`contain`	Finds values containing the specified string, number, or boolean.
`startWith`	Finds values that start with the specified string or number.
`endWith`	Finds values that end with the specified string or number.
`equalWith`	Finds values that are exactly equal to the specified value.
`notEqualWith`	Finds values that are not equal to the specified value.
`gt`	Finds values greater than the specified number.
`lt`	Finds values less than the specified number.
`gte`	Finds values greater than or equal to the specified number.
`lte`	Finds values less than or equal to the specified number.

Example of WhereType

const usersOver30 = users.find({ age: { gt: 30 } });
console.log(usersOver30);

ArgsType

The ArgsType defines options for customizing query behavior, such as selecting specific rows or skipping rows.

Property	Description
`getRow`	Custom function to process rows before returning them.
`skip`	Number of rows to skip.
`take`	Number of rows to return.
`freeze`	If `true`, prevents re-rendering when accessing the data.

Example with Class Component

To use the store in a class component, extend the StoreComponent class:

import { StoreComponent } from 'react-rock';

class UserList extends StoreComponent {
    render() {
        const allUsers = users.getAll();
        return (
            <div>
                {allUsers.map(user => <div key={user._id}>{user.name}</div>)}
            </div>
        );
    }
}

CRUD Example

// Create a new user
users.create({ name: 'Alice', age: 25 });

// Update a user
users.update({ age: 26 }, { name: { equalWith: 'Alice' } });

// Delete a user
users.delete({ name: { equalWith: 'Alice' } });

Examples with `find` and Query

// Find users over the age of 25
const usersOver25 = users.find({ age: { gt: 25 } });
console.log(usersOver25);

// Find the first user with the name 'Alice'
const alice = users.findFirst({ name: { equalWith: 'Alice' } });
console.log(alice);

Example of Using the Store in Multiple Components

React-Rock allows you to share the same store across multiple components, ensuring a consistent state throughout the app:

import { StoreComponent } from 'react-rock';

class UserList extends StoreComponent {
    render() {
        const users = this.store.getAll();
        return (
            <div>
                {users.map(user => <div key={user._id}>{user.name}</div>)}
            </div>
        );
    }
}

class UserProfile extends StoreComponent {
    render() {
        const user = this.store.findFirst({ name: { equalWith: 'John Doe' } });
        return <div>{user ? user.name : 'User not found'}</div>;
    }
}

Explanation of Types

RowType: Represents a record with an _id, _index, and _observe along with user-defined data fields.
ArgsType: Defines the options for querying rows with flexibility like skipping, taking, and custom row processing.
WhereType: Represents the conditions for querying records, using fields like contain, equalWith, and range queries like gt, lt, etc.
QueryValueType: Specifies the allowed condition types for filtering rows based on field values.

License

This package is licensed under the MIT License.

This documentation should provide a concise overview of how to use the react-rock package effectively.

🤝 Contributing

Contributions are welcome! Please check out the contribution guidelines.

📄 License

This project is licensed under the MIT License.

ONCSS

Naxrul Ahmed — Thu, 02 Jan 2025 09:53:16 +0000

ONCSS

oncss is a CSS-in-JS library that provides developers with a powerful css function to style their web applications. It enables modern styling techniques, including nested selectors, responsive design, and dynamic keyframes, all while offering seamless integration with JavaScript frameworks like React.

Installation

Install the oncss package via npm:

npm install oncss

Import the css function in your project:

import css from 'oncss';

Core Concept: The `css` Function

The css function is the heart of oncss, designed to dynamically generate and inject CSS into your application. It supports:

CSS Properties: Use standard CSS properties and values.
Nested Selectors: Apply styles to child elements or states using &.
Media Queries: Implement responsive designs with @media rules.
Keyframes: Create animations with @keyframes.
Global Styles: Apply styles globally with @global.
Custom Breakpoints: Define reusable breakpoints for responsiveness.
Other At-Rules: Utilize additional at-rules like @container, @layer, and @supports.

Basic Example

const buttonStyles = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
  '@media (min-width: 768px)': {
    padding: '15px 30px',
  },
});

console.log(buttonStyles);

Configuration Options

The css function can be customized through an options object:

Available Properties

Property	Type	Description
`classPrefix`	`string`	Adds a prefix to generated class names.
`breakpoints`	`object`	Custom breakpoints for responsive designs.
`aliases`	`object`	Custom shorthand properties for CSS rules.
`injectStyle`	`boolean`	Controls whether styles are auto-injected.
`skipProps`	`function`	Filters out unwanted properties.
`getValue`	`function`	Transforms property values dynamically.
`getProps`	`function`	Customizes specific property handling.

Example with Options

const styles = css({
  fontSize: 16,
  padding: 10,
}, {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

Using Breakpoints

You can use the defined breakpoints in your styles to create responsive designs:

const responsiveStyles = css({
  fontSize: 14,
  padding: {
    sm: 12,
    lg: 24
  },

}, {
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
});

React Integration

oncss integrates seamlessly with React. Simply pass the generated class name to your component.

React Example

import React from 'react';
import css from 'oncss';

const buttonStyle = css({
  backgroundColor: 'green',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '8px',
  '&:hover': {
    backgroundColor: 'darkgreen',
  },
});

function Button() {
  return <button className={buttonStyle.toString()}>Click Me</button>;
}

export default Button;

Advanced Features

Nested Selectors

Apply styles to child elements or pseudo-classes:

const cardStyles = css({
  padding: '20px',
  border: '1px solid #ccc',
  '& h1': {
    fontSize: '24px',
    margin: 0,
  },
  '&:hover': {
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
  },
});

Media Queries

Easily add responsive styles:

const responsiveStyles = css({
  fontSize: '14px',
  '@media (min-width: 768px)': {
    fontSize: '18px',
  },
});

Keyframes

Define and use animations:

const animationStyles = css({
  '@keyframes fadeIn': {
    from: { opacity: 0 },
    to: { opacity: 1 },
  },
  animation: 'fadeIn 2s ease-in-out',
});

Global Styles

Apply global styles effortlessly:

const globalStyles = css({
  '@global': {
    body: {
      margin: 0,
      fontFamily: 'Arial, sans-serif',
    },
    a: {
      color: 'blue',
      textDecoration: 'none',
    },
  },
});

Supported At-Rules

oncss supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with descriptions:

At-Rule	Description
`@media`	Used for applying styles based on media queries for responsive design.
`@keyframes`	Defines animations that can be applied to elements.
`@global`	Applies styles globally across the entire application.
`@container`	Used for container queries to apply styles based on container size.
`@layer`	Defines style layers to control the order of style application.
`@supports`	Applies styles based on the support of specific CSS features in the browser.

Server-Side Styling

oncss supports server-side rendering (SSR) by utilizing the CSSFactory to store and manage generated CSS styles. This allows you to extract and inject styles into your server-rendered HTML.

Example with React

Here's an example of how to use oncss for server-side rendering with React:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import css, { CSSFactory } from 'oncss';

const buttonStyle = css({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue',
  },
});

function Button() {
  return <button className={buttonStyle}>Click Me</button>;
}

const App = () => (
  <div>
    <Button />
  </div>
);

// Render the component to a string
const html = ReactDOMServer.renderToString(<App />);

let styles: any = Array.from(CSSFactory.values()).map((style) => {
  return `<style data-oncss="${style.classname}">${style.css}</style>`
});

// Inject the styles into the HTML
const fullHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSR with oncss</title>
  ${styles}
</head>
<body>
  <div id="root">${html}</div>
</body>
</html>
`;

console.log(fullHtml);

In this example, the CSSFactory is used to collect all generated CSS styles during the server-side rendering process. These styles are then injected into the HTML document, ensuring that the styles are applied correctly when the page is loaded in the browser.

Utility Functions

CSSFactory

CSSFactory is a global cache for storing generated CSS styles. It helps in reusing styles and avoiding redundant style generation.

formatCSSProp

formatCSSProp is a utility function that converts camelCase CSS property names to kebab-case.

import { formatCSSProp } from 'oncss';

const formattedProp = formatCSSProp('backgroundColor');
console.log(formattedProp); // 'background-color'

formatCSSValue

formatCSSValue is a utility function that formats CSS values, adding units like px where necessary.

import { formatCSSValue } from 'oncss';

const formattedValue = formatCSSValue('width', 100);
console.log(formattedValue); // '100px'

TypeScript Integration

oncss provides full TypeScript support, allowing you to define types for your CSS properties and options.

Defining CSS Properties

You can define the types for your CSS properties using the CSSProps type:

import { CSSProps } from 'oncss';

interface MyAliases {
  customColor?: string;
}

const styles: CSSProps<MyAliases, 'sm' | 'md' | 'lg'> = {
  backgroundColor: 'blue',
  customColor: 'red',
  '@media (min-width: 768px)': {
    backgroundColor: 'green',
  },
};

Using Options with Types

You can also define types for the options object:

import { CSSOptionProps } from 'oncss';

const options: CSSOptionProps<MyAliases, 'sm' | 'md' | 'lg'> = {
  classPrefix: 'myprefix',
  breakpoints: {
    sm: 480,
    md: 768,
    lg: 1024,
  },
  aliases: {
    customColor: (value) => ({ color: value }),
  },
};

const styles = css({
  fontSize: 16,
  padding: 10,
}, options);

Conclusion

oncss simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.

Author

Naxrul Ahmed
GitHub Profile
npm Profile
Open Source Projects

DEV Community: Naxrul Ahmed

Dboun

Usage Example

Scenario: Search Input with Debounce

Parameters

Returns

How It Works

Practical Applications

Notes

Browser Compatibility

Testing

Devnax

👋 Hi there, I'm Devnax!

🚀 Languages and Tools I Use

🛠️ Open Source Projects

🌟 Currently Working

⚡️ Where to find me

Pretty Class

Pretty Class

Installation

Usage

Importing the Package

Function Signature

Parameters

Returns

Example Usage

Basic String Input

Conditional Classes

Nested Arrays

Mixed Inputs

Benefits

License

React State Bucket

React State Bucket

🚀 Features

📦 Installation

🔧 Setup and Usage

Step 1: Create a State Bucket

Step 2: Use the State Bucket in a Component

🌟 Advanced Features

Using Multiple Buckets

Persistent Storage Options

Reusing State Across Components

📘 API Reference

createBucket(initial: object, option?: BucketOptions)

Parameters

BucketOptions

Returned Functions

State Management

Change Detection

🤝 Contributing

📄 License

📞 Support

Makepack

Makepack

Installation

Commands

create

Usage

Description

serve

Usage

Options

Description

pack

Usage

Options

Description

Example Workflow

🤝 Contributing

📄 License

📞 Support

React Rock

React Rock

Installation

Features

Basic Example: Creating a Store and Adding Records

RowType Explained

Methods

Example of the find Method

`createBucket(initial: object, option?: BucketOptions)`

`BucketOptions`

`create`

`serve`

`pack`

Example of the `find` Method

Examples with `find` and Query

Core Concept: The `css` Function