GSSelect Package

This repository builds two outputs:

1. Vanilla JS bundle (dist/bundle.js) — for direct browser usage (e.g. <script src="dist/bundle.js"></script> or CommonJS require).
2. React component (dist/components/GSSelect.js) — a GSSelect React component you can import in React projects.

Building

Run all builds:

npm install        # initial setup
npm run build      # builds both JS and React outputs

Individual targets:

• npm run build:js – webpack bundle for non‑React usage
• npm run build:react – compile React component with tsc

The React build writes compiled .js, .js.map, and .d.ts into dist/components.

Publishing to npm

1. Bump the version in package.json.
2. Make sure the build artifacts are up to date:

   npm run build

3. Verify dist and dist-js are included (the files field in package.json ensures they are).
4. npm publish from project root.

The published package exposes the two entrypoints via the exports map:

• import GSSelect from 'gsselect'; — gives the React component
• const GSSelect = require('gsselect'); — gives the plain JS constructor

The main/module/types fields also point at the React build, which is standard for a component package.

Using the React component

The component now accepts a regular React ref. When you pass a ref it will point at the underlying <select> element, allowing you to call DOM methods or inspect the element from a parent.

import React, { useRef, useEffect } from 'react';
import GSSelect from 'gsselect';

function App() {
  const selectEl = useRef<HTMLSelectElement | null>(null);

  useEffect(() => {
    if (selectEl.current) {
      // you can interact with the DOM node directly
      console.log('select node', selectEl.current);
    }
  }, []);

  return (
    <GSSelect
      ref={selectEl}
      closeAfterSelect={false}
      icon="⇩⟴"
      onChange={(ref) => console.log('ready', ref)}
    >
      <option value="1">One</option>
      <option value="2">Two</option>
    </GSSelect>
  );
}

The rest of the API remains unchanged.

Using the plain JS bundle

<script src="https://unpkg.com/gsselect/dist-js/bundle.js"></script>
<script>
  new GSSelect('.select1');
</script>

Both builds are packaged together so you maintain one npm package for both flavors.