cross-web-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

cross-web-components

Package to establish communication between your web components

  • EventHandler

import { EventHandler } from 'cross-web-components';

const customEvent = EventHandler.channel('[CUSTOM_CHANNEL]');

Example - Dispatch (React)

export const Example = () => {
  const customEvent = EventHandler.channel('[MODAL]');

  const [id, setId] = useState<string>('');

  const onClick = () => customEvent.dispatch<ModalState>('[MODAL_UPDATE_STATE]', { state: true, id });

  return (
    <>
      <input placeholder='id' value={id} onChange={({ target: { value } }) => setId(value)} />
      <button onClick={onClick}>Show</button>
    </>
  );
};

Example - Listener (React)

export const Modal = () => {
  const customEvent = EventHandler.channel('[MODAL]');

  const [state, setState] = useState<ModalState>({ state: false, id: '' });

  useEffect(() => {
    const listener = customEvent.listener<ModalState>('[MODAL_UPDATE_STATE]', payload => setState(payload));
    return () => {
      listener.unsubscribe();
    };
  }, []);

  const onClick = () => setState({ id: '', state: false });

  return (
    <>
      {state.state && (
        <div>
          <h1>{state.id}</h1>
          <button onClick={onClick}>Hide</button>
        </div>
      )}
    </>
  );
};

Get Started

  • Add the following in the dependencies of your package.json
npm install rxjs cross-web-components'
  • Ready to use
import { EventHandler } from 'cross-web-components';

Package Sidebar

Install

npm i cross-web-components

Weekly Downloads

6

Version

1.0.4

License

ISC

Unpacked Size

38 kB

Total Files

34

Last publish

Collaborators

  • imenesesl