Share your components and projects here!

[aminya]

Hi everyone!

I made this thread as a place that we can share our solid-js components and projects. If you have made any components using solid-js or you have worked on a project that uses solid-js, then share it here.

Let's keep this list growing!

[aminya]

I'll start with myself to break the ice 😄

I have been working on these two projects that use solid-js:

• solid-simple-table: which is an efficient reactive table component with a lot of options. The rows and headers can be any custom components, and it supports sorting out of the box.

  If the rows and headers be just simple text, it becomes like Atom's linter pane (which is what I plan to use my solid-table instead of it):

  

  I pushed the code for this just recently, and I will be registering it on npm soon.

• etch-solid: This is a DOM library that imitates etch API but it is made with solid-js backend. I plan to replace etch, which is a virtual DOM library with etch-solid in the Atom's code to speed up UI rendering,

[milahu]

treeview component: https://github.com/milahu/solidjs-treeview-component

[jorroll]

rx-controls-solid

• Dev.to blog post about it

I've just published a small library to simplify working with forms in Solidjs, rx-controls-solid, and I wrote up a blog post introducing it. The short version is that it provides several abstractions that help you to create small, highly composable form components.

For example, a simple TextField component which wraps an <input>.

import { withControl, FormControl } from 'rx-controls-solid';

export const TextField = withControl((props) => {
  // prop.control is static for the lifetime of the component
  const control = props.control as FormControl;

  return (
    <label>
      <span class='input-label'>{props.label}</span>

      <input
        type="text"
        value={control.value}
        oninput={(e) => {
          control.markDirty(true);
          control.setValue(e.currentTarget.value || null);
        }}
        onblur={() => control.markTouched(true)}
        placeholder={props.placeholder}
      />
    </label>
  );
});

This TextField can be easily reused in other components. For example, an AddressForm component:

import { withControl, FormGroup, FormControl } from 'rx-controls-solid';
import { toSignal } from './utils';

// initialize the FormGroup control we want our AddressForm to have
const controlFactory = () => 
    new FormGroup({
      street: new FormControl(null),
      city: new FormControl(null),
      state: new FormControl(null),
      zip: new FormControl(null),
    });

// the actual component
export const AddressForm = withControl({
  controlFactory,
  component: (props) => {
    const control = props.control;

    const sub = control.observe('value').subscribe(value => {
      // do stuff on value changes
    });

    onCleanup(() => sub.unsubscribe());

    const isControlValid = toSignal(control.observe('valid'));
    const isControlTouched = toSignal(control.observe('touched'));
    const isControlDirty = toSignal(control.observe('dirty'));

    return (
      <fieldset classList={{
        "is-valid": isControlValid(),
        "is-invalid": !isControlValid(),
        "is-touched": isControlTouched(),
        "is-untouched": !isControlTouched(),
        "is-dirty": isControlDirty(),
        "is-clean": !isControlDirty(),
      }}>
        <TextField label="Street" controlName="street" />
        <TextField label="City" controlName="city" />
        <TextField label="State" controlName="state" />
        <TextField label="Postcode" controlName="zip" />
      </fieldset>
    );
  },
});

In the AddressForm, the <TextField label="Street" controlName="street" /> is automatically connected to the AddressForm's control FormGroup. Any changes in the children are automatically reflected in the parent control and vice-versa. This AddressForm could in turn be used in another component.

Anyway, the blog post goes into greater depth and shows some more complex validation. One of the nicer features is the ability to get an observable stream of all the changes to any control.

[jorroll]

@aminya your solid-simple-table repo was helpful as I tried to figure out how to publish a Solidjs library to npm. Thanks!

[bluenote10]

Not a library/component, but a small data science tool: tabloo

Now that Solid 1.0 is released, I need to bring it up-to-date soon.