0.0.7 • Published 5 years ago

@andreas.groos/tic-tac-toe v0.0.7

Weekly downloads
4
License
ISC
Repository
github
Last release
5 years ago

Tic-Tac-Toe

A minimal grid system for React

Demo

https://andreas-groos.github.io/tic-tac-toe/

Motivation

Part of the motiviation was to learn how to build and publish my own NPM package

As a starting point I used this article.

Installation

You can install the package and use it in your project with:

npm i @andreas.groos/tic-tac-toe

or

yarn add @andreas.groos/tic-tac-toe `

Example

At the moment there are only 2 components, TRow and TCol.

const App = () => (
  <div style={{ height: "100vh" }}>
    <TRow fillHeight>
      <TCol centered>
        <h1>Tic-Tac-Toe</h1>
      </TCol>
    </TRow>
  </div>
);

TRow props

Prop Nametypepossible valuesDescription
justifyContentstringstart/flex-start, end/flex-end, between/space-between, around/space-around,evenly/space-evenlyemulates justify-content
alignItemsstringstart/flex-start, end/flex-end, center, stretch, baseline/baseemulates align-items
fillHeightbooleantrue, falseif true fills height of parent container
centeredbooleantrue, falsecenters children horizontally and vertically

TCol props

Prop Nametypepossible valuesDescription
centeredbooleantrue, falsecenters element in parent div
fillWidthbooleantrue, falseif true fills full available width