Scatter

Scatter is an extensive JavaScript framework SDK built with stability in mind. It provides a variety of components, utilities, state management, and routing capabilities to streamline frontend development.

Installation

Clone the repository and run npm install to install dependencies.

git clone https://github.com/Scatter-JS/Scatter.git

Set the src folder in your project, and you can start writing code inside of that folder.

Usage

Components

• Button
• Card
• TextField
• Container
• NavBar
• Sidebar
• Modal
• Tooltip
• Dropdown
• Table
• Badge
• Alert
• ProgressBar
• Spinner

Utilities

• DOM Utilities
• Fetch Utilities
• Validation Utilities
• Event Bus
• Date Formatter
• Storage Utility
• HTTP Utility

State Management

Scatter uses Redux-like state management with actions, reducers, and middleware.

Example State Usage

import Store from './src/state/Store.js';
import reducer from './src/state/Reducer.js';
import middleware from './src/state/middleware.js';
import { addItemAction, removeItemAction } from './src/state/Action.js';
import { getItems } from './src/state/Selector.js';

const store = new Store(reducer);

// Subscribe to state changes
const unsubscribe = store.subscribe(() => {
  const items = getItems(store.getState());
  console.log('Items:', items);
});

// Dispatch actions
store.dispatch(addItemAction({ id: 1, name: 'Item 1' }));
store.dispatch(addItemAction({ id: 2, name: 'Item 2' }));
store.dispatch(removeItemAction(1));

// Unsubscribe from state changes
unsubscribe();