@react-native-toolkit/triangle v0.0.1
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
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 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
- App Containing the storybook
- Web version of the storybook app(might not work as good as the app version)
- CodeSandbox example
Licenses
MIT © DaniAkash