reblendjs v6.0.1
ReblendJS
ReblendJS is a lightweight frontend library that seamlessly integrates the flexibility of React with the efficiency of Web Components. It offers a modular approach to state management and component rendering, ensuring fast and predictable UI updates.
π Features
- β Supports Standard HTML & React Attributes β Write components using familiar syntax.
- β
JSX Support β Use
for
,style
(as a string),class
(asclassNames
), and standard attributes. - β React Component Compatibility β Use React components within ReblendJS.
- β Uses React's Build Tools β No need to change your existing setup.
- β Functional Components Compile to Classes β Optimized for performance.
- β Single Execution for Functional Components β No unnecessary re-renders.
- β
Web Component Native Support β Directly renders existing
HTMLElement
instances without wrappers. - β Simple API & Easy to Learn β Minimal boilerplate, quick to get started.
- β Built-in Hooks Support β Manage state and side effects seamlessly.
- β Component-Level State Management β Each element holds its own state.
- β No Mixed or Async State Rendering β Eliminates issues with pre/post rendering.
- β Faster Rendering β State is localized within each element, reducing unnecessary updates.
π¦ Installation
To quickly set up a new ReblendJS project with TypeScript, use:
npx create-reblend-app --template typescript ./my-app
Alternatively, install ReblendJS manually:
npm install reblendjs
or
yarn add reblendjs
π οΈ Usage
Mounting Components to the DOM
ReblendJS uses mountOn
to attach components to the DOM:
import Reblend from 'reblendjs'
import App from './App'
Reblend.mountOn('root', App)
Functional Component Example
ReblendJS recommends using functional components for better performance, as they are efficiently compiled into class components:
import Reblend, { useState } from 'reblendjs'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
Reblend.mountOn('root', Counter)
JSX Support (for
, style
, class
, and Attributes)
ReblendJS fully supports JSX attributes, including:
- β
for
(instead ofhtmlFor
in React) - β
style
(as a string, unlike React's object-based approach) - β
class
(asclassNames
) - β
Standard attributes (
id
,name
,placeholder
, etc.)
Example:
const FormExample = () => {
return (
<form>
<label for="name">Name:</label>
<input id="name" type="text" placeholder="Enter your name" />
<button class="btn btn-primary" style="background-color: blue; padding: 10px;">
Submit
</button>
</form>
)
}
Reblend.mountOn('root', FormExample)
π― Use Cases
ReblendJS is ideal for:
- Building Web Components β Create reusable elements without React wrappers.
- Optimizing Performance β When Reactβs Virtual DOM is too heavy.
- Progressive Enhancement β Use ReblendJS alongside native HTML.
- Embedding in Non-React Projects β Works well in vanilla JS applications.
βοΈ ReblendJS vs React
Feature | ReblendJS | ReactJS |
---|---|---|
Standard HTML Attributes | β Supports all | β Supports all |
JSX for , style , class | β Fully supported | β htmlFor , style as an object, className |
React Component Support | β Fully Compatible | β Native |
Functional Components | β Compiled to Classes | β Functional with Hooks |
Hooks | β Supported | β Supported |
Web Component Support | β Native (renders without wrapper) | β Requires wrappers like React.createElement |
State Management | β Localized in elements | β Centralized (React Context, Redux) |
Rendering Performance | β Faster (isolated state per element) | β οΈ Slower when dealing with large states |
Build Tool | β Uses React's toolchain | β Uses its own build tools |
Learning Curve | β Simpler syntax, minimal setup | β οΈ More concepts (Virtual DOM, Reconciliation) |
π¨ Example: Modal with Button Interaction Using Bootstrap Components with ReblendJS
Hereβs an example of creating a button that toggles a modal:
import { Button } from 'react-bootstrap'
import Reblend, { useState } from 'reblendjs'
import Modal from 'react-bootstrap/Modal'
export function MyVerticallyCenteredModal(props: any) {
return (
<Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered closeButton>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Centered Modal</h4>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
)
}
const App = () => {
const [modalShow, setModalShow] = useState(false)
const toggleModal = () => {
setModalShow(!modalShow)
}
return (
<div>
<Button variant="primary" onClick={toggleModal}>
Toggle Modal
</Button>
<MyVerticallyCenteredModal show={modalShow} onHide={toggleModal} />
</div>
)
}
Reblend.mountOn('root', App)
ποΈ Contributing
We welcome contributions! Feel free to submit issues or pull requests.
Steps to Contribute:
- Fork the repository.
- Create a new branch.
- Commit your changes.
- Open a pull request.
π License
8 months ago
8 months ago
4 months ago
5 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago