@react-native-toolkit/triangle

Draw geometrically accurate triangles in React Native

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@react-native-toolkit/triangle
6370.0.14 years ago4 years agoMinified + gzip package size for @react-native-toolkit/triangle in KB

Readme


logo.png
React Native Triangle
Draw geometrically accurate triangles in React Native
Supports equilateral, isosceles, scalene & right-angled triangles
Built on top of the inbuilt <View/> component

!Maintainabilitymaintainability-badgemaintainability-url !Test Coveragecoverage-badgecoverage-url
!Versionversion-badgepackage !Downloadsdownloads-badgenpmtrends !Bundlephobiabundle-phobia-badgebundle-phobia
!Star on GitHubgithub-star-badgegithub-star !Watch on GitHubgithub-watch-badgegithub-watch !Twitter Followtwitter-badgetwitter

Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨


Installation

#npm
npm install --save @react-native-toolkit/triangle

#yarn
yarn add @react-native-toolkit/triangle

Motivation

Triangles are an important part of user interfaces and I needed full control over the triangle dimensions. I initially tried react-native-triangle but I had very less control over the triangle properties. Especially scalene & isosceles triangles.
This library is focused on providing an easy API to create all possible triangles based on the CSS Triangle Generator

Usage

By default, the Triangle component renders an equilateral triangle
import React from "react";
import Triangle from "@react-native-toolkit/triangle";

const App = () => {
  return <Triangle mode={"top"} base={50} color={"red"} />;
};

This will render an equilateral triangle of color "red" & side - 50

Properties

Equilateral Triangle - All three sides equal

type?: "equilateral"
Type of the triangle. Optional for equilateral triangle
mode: "top" | "bottom" | "left" | "right"
Direction in which the triangle is facing
base: number
Length of the base & since it's equilateral all the sides have the length of the base
color: string
Color of the triangle

Isosceles Triangle - Two sides of the triangle are equal

type: "isosceles"
Type of the triangle.
mode: "top" | "bottom" | "left" | "right"
Direction in which the triangle is facing
base: number
Length of the base
height: number
Height of the triangle from base to the peak. The two connecting sides will have the equal length.
color: string
Color of the triangle

Scalene Triangle - All three sides of the triangle have different lengths

type: "scalene"
Type of the triangle.
mode: "top" | "bottom" | "left" | "right"
Direction in which the triangle is facing
height: number
Height of the triangle from base to the peak.
left: number
Length of the side on the left of the line representing height of the triangle.
right: number
Length of the side on the right of the line representing height of the triangle.
color: string
Color of the triangle

Right Angled Triangle - A triangle with angle of 90° on one of it's sides

type: "rightAngle"
Type of the triangle.
mode: "top-left" | "top-right" | "bottom-left" | "bottom-right"
Direction in which the triangle is facing
base: number
Length of the base
height: number
Height of the triangle from base to the peak. The two connecting sides will have the equal length.
color: string
Color of the triangle

ViewProps

All existing ViewProps are supported by this component as it extends the <View/> component. However, it cannot have any children as creating a triangle requires height & width of the View to be 0.

Examples

Licenses

MIT © DaniAkashtwitter