How to create a Solid.JS application with Syncfusion EJ2 controls

This article explains how to create a Solid.JS application with Syncfusion EJ2 controls

Refer below steps to create a Solid.js application

Step 1: The first step is to create a new SolidJS application by running the command below in the terminal

npx degit solidjs/templates/my-demo

Step 2: Navigate to the folder and install the application dependencies with the commands below

cd my-demo    
 
npm install

Step 3: Installing the Syncfusion EJ2 button component package by running the below command

npm install @syncfusion/ej2-buttons --save

Step 4: Add the following code snippet given below in App.jsx.

import { createSignal, onCleanup } from 'solid-js';
import { Button } from '@syncfusion/ej2-buttons';
 
// Import the EJ2 button styles
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
 
function App() {
  const [counter, setCounter] = createSignal(0);
 
  function handleButtonClick() {
    setCounter(counter() + 1);
  }
 
  return (
    <div>
      <h2>Syncfusion Button component rendered</h2>
      <h1>Counter: {counter()}</h1>
      <Ej2Button onClick={handleButtonClick}>EJ2 Button</Ej2Button>
    </div>
  );
}
 
function Ej2Button({ onClick, children }) {
  const handleClick = () => {
    onClick();
  };
 
  let buttonRef;
 
  onCleanup(() => {
    // Clean up the EJ2 button instance
    if (buttonRef) {
      buttonRef.destroy();
      buttonRef = null;
    }
  });
 
  return (
    <button
      ref={(el) => {
        if (el) {
          // Create and initialize the EJ2 button
          buttonRef = new Button({}, el);
        }
      }}
      onClick={handleClick}
    >
      {children}
    </button>
  );
}
 
export default App;

Step 5: The next step is to run yarn dev to start the development server, which opens at http://localhost:3000/ on your browser.

Refer to our documentation and online samples for more features. If you have any queries, please let us know in the comments below. You can also contact us through our Support forum or Support ticket. We are happy to assist you!