6.0.1 β€’ Published 4 months ago

reblendjs v6.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

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 (as classNames), 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 of htmlFor in React)
  • βœ… style (as a string, unlike React's object-based approach)
  • βœ… class (as classNames)
  • βœ… 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

FeatureReblendJSReactJS
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:

  1. Fork the repository.
  2. Create a new branch.
  3. Commit your changes.
  4. Open a pull request.

πŸ“œ License

MIT License.

5.6.14

8 months ago

5.6.13

8 months ago

6.0.1

4 months ago

5.7.2

5 months ago

5.7.0

7 months ago

5.6.11

9 months ago

5.6.12

9 months ago

5.6.10

9 months ago

5.6.8

9 months ago

5.6.5

9 months ago

5.6.4

10 months ago

5.6.2

10 months ago

5.6.1

10 months ago

3.0.45

11 months ago

3.0.46

11 months ago

3.0.43

11 months ago

3.0.48

11 months ago

2.0.28

1 year ago

3.0.40

11 months ago

2.0.29

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.9

1 year ago

2.0.8

1 year ago

2.0.1

1 year ago

3.0.13

12 months ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.11

12 months ago

3.0.16

12 months ago

3.0.8

12 months ago

3.0.17

12 months ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.15

12 months ago

3.0.23

11 months ago

3.0.24

11 months ago

3.0.21

11 months ago

3.0.22

11 months ago

3.0.28

11 months ago

3.0.26

11 months ago

3.0.20

11 months ago

2.0.15

1 year ago

2.0.16

1 year ago

2.0.13

1 year ago

2.0.14

1 year ago

2.0.11

1 year ago

2.0.12

1 year ago

2.0.10

1 year ago

3.0.18

11 months ago

3.0.19

11 months ago

3.0.9

12 months ago

3.0.34

11 months ago

3.0.33

11 months ago

3.0.38

11 months ago

3.0.39

11 months ago

3.0.37

11 months ago

3.0.30

11 months ago

2.0.19

1 year ago

3.0.31

11 months ago

2.0.17

1 year ago

2.0.18

1 year ago

2.0.27

1 year ago

2.0.24

1 year ago

2.0.25

1 year ago

2.0.22

1 year ago

2.0.23

1 year ago

2.0.20

1 year ago

3.0.29

11 months ago

1.1.4

1 year ago

1.1.3

1 year ago

1.0.2

1 year ago