**Belle** is a library that provides configurable React components. The set of React components include Toggle, ComboBox, Rating, TextInput, Button, Card, Select, etc.  


All of the components are optimized to work on both mobile and desktop devices. The styles are highly customizable on two levels: 
1) You can configure the base styles of all the components.
2) You can modify each one of them individually.

# Installation

Belle can be installed as an [npm package](https://www.npmjs.com/package/belle):
```
npm install belle
```

# Code

As an example, let's create a toggle and a text field in React.  

Belle provides the `TextInput` and `Toggle` components. We will use these components in our parent `App` component.

import React from 'react';
import ReactDOM from 'react-dom';

const belle = require('belle');

const TextInput = belle.TextInput;
const Toggle = belle.Toggle;

const App = () => {

  return (
    <div>
      <p>Toggle:</p>
      <Toggle />
      <p>Text Input:</p>
      <TextInput defaultValue="Add text here..." />
    </div>
  );
};


ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


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

> Note: Belle no longer works with the latest versions of React (v16+), so you need to use React v15. You can check out the [GitHub repo](https://github.com/nikgraf/belle) for updates.

What is Belle in React?

All of the components are optimized to work on both mobile and desktop devices. The styles are highly customizable on two levels:  You can configure the base styles of all the components. You can modify each one of them individually.  