Flawwwless ui is a new open source React.js components library. The main goal of Flawwwless ui is to build a free components library that help developers to create high-quality enterprise application easily. With that in mind, we've also wanted to build a component library that can be easily integrated and customizable to match any existing applications without messing with existing styling.
This article is a brief overview of some of the components available inside Flawwwless ui. For more in-depth information about the livrary, you can find the full official documentation on https://ui.flawwwless.com.
Note: In this tutorial, we'll also be using the package name flwww to designate the Flawwwless ui library.
Prerequisites
You need to have create-react-app installed globally and have a basic understanding of React.js. (skip if it's already installed)
npm install -g create-react-app
Let's get starting 🚀
Installation
Let's start by creating a new application using create-react-app and download Flawwwless ui inside your newly created app using your terminal:
create-react-app flwww-intro
Once your app created, jump inside the root of your app and install Flawwwless ui using yarn:
cd flwww-intro && yarn add flwww
Buttons
Creating a default button using flwww is pretty straight forward. Once the component imported from the library, you can use it just like you would use an original button:
There are 3 other button types you can use inside your app: primary, success & danger. To change the button type, you need to store the type of the button as a string inside the type props:
<Button type="success" />
import React from "react";
// Import the flwww Button
import { Button } from "flwww";
function App() {
return (
<div style={{ marginTop: "2rem", textAlign: "center" }}>
<Button onClick={ () => alert("Submitting...") }>Default</Button>
</div>
);
}
export default App;
For more information and customization options about flwww Button (outlined, round, custom colors, loading, etc.), visit: https://ui.flawwwless.com/documentation/button
Inputs
To create a basic text input, you can use it as you would use an original input:
*Note: The input takes 100% of the width of its parent element.
import React from "react";
// Import the flwww Input
import { Input } from "flwww";
function App() {
return (
<div style={{ width: "500px" }}>
<Input placeholder="Simple input" />
</div>
);
}
export default App;
For more information and customization options about flww Input, visit: https://ui.flawwwless.com/documentation/input
Icons
To create an Icon, you need to specify which Icon you want to use as a string inside the type props of the Icon.
For an easy implementing inside your app:
Visit https://ui.flawwwless.com/documentation/icon
Find the Icon you want to use
Click on it to copy the Component
Finally, paste it directly inside your code!
You can specify the size of your Icon using the size props and you can also specify it's color with his color props.
If you don't specify a size &/or a color props, the Icon will get the size &/or the color of the nearest parent. For example, if you put an Icon inside a h1 tag without specifying it's size and color, the Icon will have the same size and color as the h1 text.
This is how you can create a thumbUp Icon with a size of 5rem and a color of #03a87c :
import React from "react";
// Import the flwww Button
import { Icon } from "flwww";
function App() {
return (
<div style={{ marginTop: "2rem", textAlign: "center" }}>
<Icon
type="thumbUp"
size="5rem"
color="#03a87c" />
</div>
);
}
export default App;
For more information and customization options about flww Icon, visit: https://ui.flawwwless.com/documentation/icon.
Messages
Sending messages with Flawwwless ui is pretty easy too. Once you've imported the message component from flwww, you can use it as a simple function to send an alert message to the user.
The function attached the message to the DOM and remove it a few seconds after. Here is an example of a message that is being sent to the user when someone clicks on a "Send message" button:
import React from "react";
// Import the flwww Button and message
import { Button, message } from "flwww";
function App() {
return (
<div style={{ marginTop: "10rem", textAlign: "center" }}>
<Button onClick={ () => message("This is a default message.") }>Send message</Button>
</div>
);
}
export default App;
For more information and customization options about flww message (type, duration, etc.), visit: https://ui.flawwwless.com/documentation/message.
Modals
Adding beautiful and animated Modals to an existing React.js application can be a tedious act. Fortunately, Flawwwless ui solve this problem elegantly!
First, you can put any valid JSX code inside the Modal component.
To control the visibility of the Modal, you only have to change the isVisible props using Booleans (generally stored inside the state).
To close the Modal, you need to pass a function that changes the state that controls the visibility of the modal inside the toggleModal props (e.g. a function that toggle the visibility inside the component state).
Here is a simple example of a Modal:
import React, { Component } from "react";
// Import the flwww Button and message
import { Modal, Button } from "flwww";
class App extends Component {
state = {
modalIsVisible: false // This control if the modal is visible or not
}
toggleModal = () => {
// This function change the state of the modal visibility (e.g. this.state.modalIsVisible)
this.setState(prevState => ({ modalIsVisible: !prevState.modalIsVisible }));
}
render(){
const { modalIsVisible } = this.state;
return (
<div>
<Button onClick={ this.toggleModal }>Show the modal</Button>
<Modal
isVisible={ modalIsVisible }
toggleModal={ this.toggleModal }>
<h3>Put anything you want inside!</h3>
<p>You only have to put JSX code inside the Modal component!</p>
<p>To control the visibility of the Modal, you have to change the isVisible props.</p>
<p>To close the Modal, you need to pass a function that change the state that control the visibility of the modal (e.g. toggle Modal function).</p>
<Button onClick={ this.toggleModal } type="primary">Continue</Button>
</Modal>
</div>
)
}
}
export default App;
Go to https://ui.flawwwless.com/documentation/modal for more information, and customization options for your Modal component.
Nice work 🙌
You've now been introduced to the Flawwwless ui Library. To learn more about the components presented in this article or to see all the components available in flwww (Menu, Drawer, Table, Layouts, etc.), you'll find the official documentation at https://ui.flawwwless.com/.
I hope Flawwwless ui will help you to create awesome applications even more easily and quickly 🏎️!
Top comments (0)