Please contribute on this repo by giving new feature on the DynamicUI
component ๐. This abstract bellow are written by ChatGPT by understanding the component and the target.
- routing page
- API
- lazyload
Neumix is a dynamic UI renderer built with React and integrated with NextUI components. It allows developers to define UI elements in a JSON structure, making it easy to create, modify, and manage user interfaces dynamically. This component leverages TypeScript for type safety and better coding practices, ensuring a seamless development experience.
- JSON UI components
- Dynamic UI components
- React dynamic rendering
- NextUI JSON UI
- React interface elements
- UI element configuration
- React functional components
- TypeScript React UI
- Customizable UI in React
- Dynamic form elements
- React component rendering
-
Clone the repository:
git clone https://github.com/neuxbane/Neumix.git cd Neumix
-
Install the dependencies:
npm install
-
Start the development server:
npm start
- Import and use the
DynamicUI
component in your React application. Ensure you define the necessary action handlers.
"use client";
import React, { useState } from 'react';
import { NextPage } from 'next';
import Dynamix from '@/components/dynamix';
let rerender = ()=>{};
const dynamix = new Dynamix(rerender); // Create an instance of Dynamix
// Example elements to be added to the 'root' container
dynamix.appendElement('root', {
type: 'text',
content: 'Register',
style: { fontSize: '24px', fontWeight: 'bold', marginBottom: '1rem' },
});
dynamix.appendElement('root', {
type: 'input',
id: 'email',
inputType: 'email',
placeholder: 'Email',
onChange: (val) => {
console.log(val);
},
});
dynamix.appendElement('root', {
type: 'input',
id: 'password',
inputType: 'password',
placeholder: 'Password',
onChange: (val) => {
console.log(val);
},
});
dynamix.appendElement('root', {
type: 'button',
id:'btn-passwd',
content: 'Show password',
onClick: () => {
dynamix.editElement('password', (prev) => ({
inputType: prev.inputType === 'text' ? 'password' : 'text',
}));
dynamix.editElement('btn-passwd', (prev)=>({
content:prev.content==='Show password'?'Hide password':'Show password'
}))
},
});
dynamix.editElement('root', ()=>({gap:'1rem'}))
const Page: NextPage = () => {
const [, setTick] = useState(0);
rerender = () => setTick((tick) => (tick + 1) % 100); // State to trigger re-render
dynamix.fetchRerender(rerender);
return <>{dynamix.compile()}</>;
};
export default Page;
- Run your React application to see the dynamically rendered UI.
For more details and examples, please refer to the documentation.
Contributions are welcome! Please read the contributing guidelines first.
This project is licensed under the MIT License - see the LICENSE file for details.