Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
reactjs
belle
web development
ux

What is Belle in React?

Educative Answers Team

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

svg viewer

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.
svg viewer
Some of the components available in Belle

Installation

Belle can be installed as an npm package:

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')
);

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 for updates.

RELATED TAGS

react
reactjs
belle
web development
ux
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring