**Grommet** is a React-based component library similar to UI libraries like Material-UI and React Bootstrap.

The React-based framework claims to provide accessibility, modularity, responsiveness, and themes.
It provides great theme tooling and specializes in accessible, mobile-friendly applications. 

> Check out their [website](https://v2.grommet.io/) for more details.

# Installation

For npm users:  
`npm install grommet styled-components --save`

For yarn users:  
`yarn add grommet styled-components`

# Code

Let's create a cool-looking drop-down button using Grommet:

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';
import { DropButton, Box } from 'grommet';

export default function App() {
  return (
    <DropButton
      label="Click me!"
      dropAlign={{ top: "bottom", right: "right" }}
      dropContent={<Box pad="large" background="light-2" />}
    />
  );
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

What is React Grommet?

Grommet is a React-based component library that offers accessibility, modularity, responsiveness, and theme customization for building mobile-friendly applications.