Awesome

Tetrahedron Core

Tetrahedron Core is a collection of components that are frequently used by the sub-packages in Tetrahedron UI.

Quick Jump

1. Installation
2. Documentation
   1. Stylable

Installation

Using yarn

yarn add @tetrahedron/core

Using npm

npm install @tetrahedron/core

Documentation

Stylable

Stylable is a function that returns a styled-components component that has all of the most commonly set CSS properties exposed as react properties.

Props

• padding: string - structure: 20px
• margin: string - structure: 20px
• width: string - structure: 100px
• height: string - structure: 100px
• visibility: string - visible|hidden|collapse|initial|inherit
• display: string - inline|block|contents|flex|grid|inline-block|none|initial|inherit|inline-flex|inline-grid|inline-table|list-item|run-in|table|table-caption|table-column-group|table-header-group|table-footer-group|table-row-group|table-cell|table-column|table-row
• opacity: float - 0-1.0
• background: string - structure: color
• border: string - structure: width style color
• hidden: boolean

Usage

This is not something that you will use as a react component, but rather as a complement to styled-components. It's a function that accepts a single string argument (tagname). Most every html tag is supported, you can find a list of html tags here.

Here's an example of basic usage

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const CustomComponent = Stylable("div");

const App = () => (
  <CustomComponent padding="20px" background="palevioletred" color="white">
    This is my custom styled component!
  </CustomComponent>
);

ReactDOM.render(<App />, document.getElementById("root"));

You can also combine the Stylable function with styled to set an initial style via styled-components, while still allowing style changes inline. This is especially useful if you want to create a reusable component that will allow tweaking on the fly.

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const CustomComponent = styled(Stylable("div"))`
  font-size: 30px;
  font-family: sans-serif;
`;

const App = () => (
  <CustomComponent padding="20px" background="palevioletred" color="white">
    This is my custom styled component!
  </CustomComponent>
);

ReactDOM.render(<App />, document.getElementById("root"));

Credits

Tetrahedron Core is a project by Garet McKinley

Want to help? Join our Spectrum.chat community to get started!

License

MIT