React Native Triangle
Draw geometrically accurate triangles in React NativeSupports 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
- ℹ️ Usage
- 💡 Examples
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 triangleimport 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 trianglemode: "top" | "bottom" | "left" | "right"
Direction in which the triangle is facingbase: number
Length of the base & since it's equilateral all the sides have the length of the basecolor: string
Color of the triangleIsosceles 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 facingbase: number
Length of the baseheight: number
Height of the triangle from base to the peak. The two connecting sides will have the equal length.color: string
Color of the triangleScalene 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 facingheight: 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 triangleRight 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 facingbase: number
Length of the baseheight: number
Height of the triangle from base to the peak. The two connecting sides will have the equal length.color: string
Color of the triangleViewProps
All existingViewProps
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
- App Containing the storybookstorybook-app
- Web version of the storybook appstorybook-web
- CodeSandbox examplecodesandbox-example