@neoskop/enc-ui

@neoskop/enc-ui is a React UI library built with TypeScript and bundled using tsup. It provides a set of reusable components and hooks for building user interfaces in React applications.

Installation

To install the library, use one of the following package managers:

pnpm install @neoskop/enc-ui
# or
yarn add @neoskop/enc-ui
# or
npm add @neoskop/enc-ui

Usage

To use the components and hooks provided by @neoskop/enc-ui, import them into your React application:

Header for enercity

import { EnercityHeader } from "@neoskop/enc-ui/components/header/enercity";
import '@neoskop/enc-ui/components/header/enercity/index.css';

const App = () => {
  return (
    <div>
      <EnercityHeader />
      <h1>Hello, World!</h1>
    </div>
  );
};

Footer for enercity

import { EnercityFooter } from "@neoskop/enc-ui/components/footer/enercity";
import '@neoskop/enc-ui/components/footer/enercity/index.css';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <EnercityFooter />
    </div>
  );
};

Custom Header

import { Search, Person } from "@neoskop/enercity-icons";
import { Header, HeaderAddon, type HeaderProps } from "@neoskop/enc-ui/components/header";
import '@neoskop/enc-ui/components/header/enercity/index.css';

export const config: HeaderProps['config'] = {
  mainItems: [
    {
      id: 'home',
      href: '/',
      title: 'Home',
    },
  ],
  preHeaderLinks: [
    {
      current: 'page',
      href: '/pre-header-link-1',
      id: 'pre-header-link-1',
      title: 'Pre Header Link 1',
    },
  ],
  targetGroups: [
    {
      current: 'page',
      href: '/target-group-1',
      id: 'target-group-1',
      title: 'Target Group 1',
    },
  ],
};

export const EnercityHeader = () => {
  return (
    <Header
      addonsSlot={
        <>
          <HeaderAddon
            iconSlot={<Search height={20} width={20} />}
            href="https://www.enercity.de/suche"
          >
            Suche
          </HeaderAddon>
          <HeaderAddon
            iconSlot={<Person height={20} width={20} />}
            href="https://www.enercity.de/login"
          >
            Login
          </HeaderAddon>
        </>
      }
      config={config}
    />
  );
};

EyeAble

In order to show the EyeAble trigger Visuelle Hilfe in the pre-header, you have to set the withEyeAbleTrigger prop on the Header component.

This package does not include the EyeAble scripts! You are expected to include them yourself, because how they are loaded depends on your framework of choice. An example for Next.js would be:

/*
  Replace ${domain} with the hostname of your application, e.g. www.enercity.de or support.enercity.de
  Check the EyeAble dashboard, if you are unsure which domain to provide.
*/

return (<>
  <Script
    async
    src={`https://www.enercity.de/eyeable/configs/${domain}.js`}
  />
  <Script
    async
    src="https://www.enercity.de/eyeable/public/js/eyeAble.js"
  />
</>);

Contributing

For development setup, build instructions, and publishing guidelines, see CONTRIBUTING.md.