Draw geometrically accurate triangles in React Native
Supports equilateral, isosceles, scalene & right-angled triangles
Built on top of the inbuilt <View/> component
- 📦 Installation
- ℹ️ Usage
- 💡 Examples
#npm
npm install --save @react-native-toolkit/triangle
#yarn
yarn add @react-native-toolkit/triangleTriangles 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
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
Type of the triangle. Optional for equilateral triangle
Direction in which the triangle is facing
Length of the base & since it's equilateral all the sides have the length of the base
Color of the triangle
Type of the triangle.
Direction in which the triangle is facing
Length of the base
Height of the triangle from base to the peak. The two connecting sides will have the equal length.
Color of the triangle
Type of the triangle.
Direction in which the triangle is facing
Height of the triangle from base to the peak.
Length of the side on the left of the line representing height of the triangle.
Length of the side on the right of the line representing height of the triangle.
Color of the triangle
Type of the triangle.
Direction in which the triangle is facing
Length of the base
Height of the triangle from base to the peak. The two connecting sides will have the equal length.
Color of the triangle
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.
- App Containing the storybook
- Web version of the storybook app(might not work as good as the app version)
- CodeSandbox example
MIT © DaniAkash