SolidJS is gaining popularity among developers for building fast and reactive user interfaces. Its component-based architecture allows for creating reusable UI elements that can be shared across different parts of an application. This article explores practical approaches to building reusable SolidJS components that enhance productivity and maintainability in modern web development.

Understanding SolidJS Components

SolidJS components are functions that return JSX, a syntax extension for JavaScript that resembles HTML. These components can accept props, manage internal state, and respond to reactive data changes. The key to creating reusable components lies in designing flexible APIs and encapsulating logic effectively.

Design Principles for Reusable Components

  • Encapsulation: Keep components self-contained with clear interfaces.
  • Props-driven: Use props to customize behavior and appearance.
  • Composability: Build components that can be combined to form complex UI elements.
  • Minimal dependencies: Avoid tight coupling with global state or external libraries.

Creating a Reusable Button Component

Let's start with a simple, reusable button component. It should accept props for label, style, and click handler, making it adaptable to various contexts.

import { createSignal } from "solid-js";

function Button(props) {
  return (
    <button
      style={props.style}
      onClick={props.onClick}
    >{props.label}</button>
  );
}

export default Button;

Implementing a Flexible Card Component

Cards are common UI elements. A reusable card component can accept props for title, content, and footer, and can include slots for more flexibility.

function Card(props) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "16px", borderRadius: "8px" }}>
      <h3>{props.title}</h3>
      <div>{props.children}</div>
      {props.footer && <div style={{ marginTop: "16px" }}>{props.footer}</div>}
    </div>
  );
}

export default Card;

Building a Reusable List Component

Lists are essential for displaying collections of data. A generic List component can accept an array of items and a render function for custom item rendering.

function List(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{props.renderItem(item)}</li>
      ))}
    </ul>
  );
}

export default List;

Best Practices for Reusable SolidJS Components

To maximize reusability and maintainability, consider the following best practices:

  • Use descriptive prop names: Make your components easy to understand and use.
  • Provide default props: Ensure components have sensible defaults.
  • Keep components stateless when possible: Enhance reusability by avoiding unnecessary internal state.
  • Document component APIs: Clearly specify how to use each component.

Conclusion

Building reusable UI components with SolidJS enables developers to create efficient, maintainable, and scalable applications. By adhering to design principles such as encapsulation, flexibility, and simplicity, you can craft components that serve multiple purposes across your projects. Start experimenting with simple components like buttons and cards, and gradually build more complex, reusable elements tailored to your application's needs.