@elastic/eui

What is @elastic/eui?

@elastic/eui is a comprehensive library of UI components for building user interfaces in React applications. It is designed to provide a consistent and flexible design system, primarily used within the Elastic ecosystem, but it can be utilized in any React project. The library includes a wide range of components such as forms, tables, charts, and more, all designed to be accessible and customizable.

What are @elastic/eui's main functionalities?

UI Components

EUI provides a variety of UI components like buttons, forms, and modals. The code sample demonstrates how to use the EuiButton component to create a button that shows an alert when clicked.

import { EuiButton } from '@elastic/eui';

function App() {
  return <EuiButton onClick={() => alert('Button clicked!')}>Click me</EuiButton>;
}

Data Visualization

EUI includes components for data visualization, such as charts and graphs. The code sample shows how to create a simple line chart using the EuiChart component.

import { EuiChart } from '@elastic/eui';

function ChartComponent() {
  return <EuiChart type="line" data={[{ x: 1, y: 2 }, { x: 2, y: 3 }]} />;
}

Theming and Customization

EUI allows for theming and customization of components to fit different design needs. The code sample demonstrates how to use the EuiProvider to apply a dark theme to an application.

import { EuiProvider } from '@elastic/eui';

function ThemedApp() {
  return (
    <EuiProvider colorMode="dark">
      <YourAppComponents />
    </EuiProvider>
  );
}

Other packages similar to @elastic/eui

material-ui

Material-UI (now MUI) is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options similar to EUI, but it is more widely used outside of the Elastic ecosystem and has a larger community and support base.

ant-design

Ant Design is a React UI library with a comprehensive set of components and design guidelines. It is similar to EUI in terms of component variety and customization capabilities, but it follows a different design philosophy and is more popular in the Asian market.

chakra-ui

Chakra UI is a modern React UI library that focuses on simplicity and accessibility. It offers a smaller set of components compared to EUI but emphasizes ease of use and flexibility, making it a good choice for projects that require a lightweight and customizable UI solution.

README

Testing-related utilities

EUI uses many of the utilities in this directory in its own Jest tests and, in case they are useful for consuming apps, exports them from @elastic/eui/lib/test (commonjs) and @elastic/eui/es/test (esm)

findTestSubject

Provides a quick mechanism for searching an Enzyme-mounted component tree for an element with a specific data-test-subj attribute.

// if mountedComponent contains e.g. <button data-test-subj="custom-button"/>, this would return that button
const component = findTestSubject(mountedComponent, 'custom-button');

startThrowingReactWarnings

Patches console.warn and console.error to throw any warnings or errors, causing Jest to fail the test. This catches warnings emitted by React.

stopThrowingReactWarnings

Must be called after startThrowingReactWarnings, this unpatches the console and restores normal functionality.

sleep

Returns an awaitable promise that resolves after the specified duration.

doSomeAction();
await sleep(500); // wait 500ms
expect(resultOfSomeAction);

takeMountedSnapshot

Use this function to generate a Jest snapshot of components that have been fully rendered using Enzyme's mount method. Typically, a mounted component will result in a snapshot containing both React components and HTML elements. This function removes the React components, leaving only HTML elements in the snapshot.

This function takes an optional configuration as a second argument, which supports one option: hasArrayOutput. Enable this option if the mounted component has multiple direct children, otherwise only the first is included in the snapshot.

expect(
  takeMountedSnapshot(mountedComponent, {
    hasArrayOutput: true,
  })
).toMatchSnapshot();