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 command below.

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/ in 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!

Conclusion

We hope you enjoyed learning how to to create a Solid.JS application with Syncfusion EJ2 controls.

Refer to our documentation, and how to quickly get started for configuration specifications. You can also explore our online samples to understand how to create and visualize the data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!