0.0.7 • Published 5 years ago
@andreas.groos/tic-tac-toe v0.0.7
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 Name | type | possible values | Description | |
---|---|---|---|---|
justifyContent | string | start /flex-start , end /flex-end , between /space-between , around /space-around ,evenly /space-evenly | emulates justify-content | |
alignItems | string | start /flex-start , end /flex-end , center , stretch , baseline /base | emulates align-items | |
fillHeight | boolean | true , false | if true fills height of parent container | |
centered | boolean | true , false | centers children horizontally and vertically |
TCol
props
Prop Name | type | possible values | Description |
---|---|---|---|
centered | boolean | true , false | centers element in parent div |
fillWidth | boolean | true , false | if true fills full available width |