DEV Community

wattanx
wattanx

Posted on

Create a simple calculator component in React

I created a React Component for a simple calculator.
Here is a brief explanation of why I made it and how to use it.

https://github.com/wattanx/simple-react-calculator

Why?

I wanted to create and publish some React Component.
I also wanted to make it available as a reference on how to publish React Component and npm packages.

Install

To use simple-react-calculator, all you need to do is install the simple-react-calculator package and its peer dependencies.

npm install simple-react-calculator @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

or

yarn add simple-react-calculator @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

Usage

import { ReactCalculator } from "simple-react-calculator";

const Example = () => {
  return <ReactCalculator />;
};
Enter fullscreen mode Exit fullscreen mode

Why using emotion?

When selecting a CSS in JS library, I was torn between styled-components and emotion.

According to the following article, emotion has slightly better performance, so I decided to use emotion.

https://dev.to/meetdave3/styled-components-vs-emotion-js-a-performance-perspective-4eia

I also decided to use emotion because my favorite library, Chakra UI, uses emotion.

If you think it looks interesting, please try to make it.

If you have any suggestions or questions please let me know in the comments.

Thanks for reading!

Top comments (0)