https://github.com/kaf-lamed-beyt/center

A React component that helps you center any element or component vertically and horizontally
https://github.com/kaf-lamed-beyt/center

css flexbox react typescript

Last synced: 19 days ago
JSON representation

A React component that helps you center any element or component vertically and horizontally

• Host: GitHub
• URL: https://github.com/kaf-lamed-beyt/center
• Owner: kaf-lamed-beyt
• License: mit
• Created: 2023-02-01T14:49:08.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-10T15:44:59.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T21:18:44.891Z (about 1 month ago)
• Topics: css, flexbox, react, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/centa
• Size: 139 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# centa

[![build](https://github.com/kaf-lamed-beyt/center/actions/workflows/main.yml/badge.svg)](https://github.com/kaf-lamed-beyt/center/actions/workflows/main.yml)

"CSS is hard". We all know how it can make a lot of developers go **Bonkers** 😩, especially Backend Developers!

This repo is a simple implementation of one, out of the many reasons why a lot of Devs lament over CSS — "Centering a div".

It is a React component that you can wrap around any element in your project, and it'll center such element(s), vertically and horizontally on the page or current viewport.

## Usage

To use this package, install it from [npm](https://npmjs.com/package/centre)

```bash

npm install centa

```

...and import it anywhere in your project.

```jsx

import React from "react";

import { Center } from "centa";

export default function Component() {

  return (

    

      
This element will be centered

    

  );

}

```


When you're importing the package, make sure you spell the package name as **"centa"** not "center" or "centre". 

Why? You might ask. Well.... this is because there are two packages on NPM that are spelt exactly that way. 

So to avoid any errors when I try to publish the package, I had to change the package name to use something completely different from the British and American spelling convention.

## Not a fan of React?

Yes, you can use the style of this component, even if you dont write, or like React, just copy the style below.

```css

.parent-container {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  width: 100vw;

}

.element-you-want-to-center {

  width: 40px;

  height: 40px;

  /* rest of your styles */

}

```

Whenever you try to use the style declarations above, note that the `.parent-container` class should always have a fixed `width` and `height` properties. Your use case doesn't have to implement the `view-width` and `view-height` units, which takes the whole viewport. You can use other CSS measurement units.

## Contributing

Checkout the [Contributing guide](CONTRIBUTING.md)