npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@shipt/segmented-arc-for-react-native

v1.2.2

Published

Segmented arc component for React Native

Downloads

790

Readme

Segmented Arc for React Native

Segmented arc component for React Native. Check out our documentation below to learn how to get started.

Example app demo

example

Table of Contents

🚀 Installation

There are two steps to get this package up and running.

  1. Install react-native-svg library by following their instructions.

  2. Install @shipt/segmented-arc-for-react-native:

yarn add @shipt/segmented-arc-for-react-native

or if you prefer to use npm:

npm install --save @shipt/segmented-arc-for-react-native

🎉 Usage

Here is a basic example of how to use this component. It covers all the main features.

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';
import { SegmentedArc } from '@shipt/segmented-arc-for-react-native';

const App = () => {
  const [showArcRanges, setShowArcRanges] = useState(false);

  const segments = [
    {
      scale: 0.25,
      filledColor: '#FF746E',
      emptyColor: '#F2F3F5',
      data: { label: 'Red' }
    },
    {
      scale: 0.25,
      filledColor: '#F5E478',
      emptyColor: '#F2F3F5',
      data: { label: 'Yellow' }
    },
    {
      scale: 0.25,
      filledColor: '#78F5CA',
      emptyColor: '#F2F3F5',
      data: { label: 'Green' }
    },
    {
      scale: 0.25,
      filledColor: '#6E73FF',
      emptyColor: '#F2F3F5',
      data: { label: 'Blue' }
    }
  ];

  const ranges = ['10', '20', '30', '40', '50'];

  const _handlePress = () => {
    setShowArcRanges(!showArcRanges);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <SegmentedArc
        segments={segments}
        fillValue={70}
        isAnimated={true}
        animationDelay={1000}
        showArcRanges={showArcRanges}
        ranges={ranges}
      >
        {metaData => (
          <Pressable onPress={_handlePress} style={{ alignItems: 'center' }}>
            <Text style={{ fontSize: 16, paddingTop: 16 }}>{metaData.lastFilledSegment.data.label}</Text>
            <Text style={{ lineHeight: 80, fontSize: 24 }}>More info</Text>
          </Pressable>
        )}
      </SegmentedArc>
    </View>
  );
};

export default App;

Try this example yourself here.

Custom segment sizing

If you would like to adjust the sizing of the segments individually, just provide the arcDegreeScale property on segments whose size you'd like to control. Segments without an arcDegreeScale will be equally sized for the remainder of the arc.

const segments = [
  {
    arcDegreeScale: 0.5, // will take up half the entire arc
    filledColor: '#FF746E',
    emptyColor: '#F2F3F5'
  },
  {
    filledColor: '#F5E478', // each of these segments will use a third of the remainder of the arc, or 1/6 of the total since the segment above is using 50%
    emptyColor: '#F2F3F5'
  },
  {
    filledColor: '#78F5CA',
    emptyColor: '#F2F3F5'
  },
  {
    filledColor: '#6E73FF',
    emptyColor: '#F2F3F5'
  }
];

📖 Props

| Name | Type | Default | Description | | --------------------------- | --------------------------------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fillValue | number (0-100) | 0 | Current progress value | | segments | Array of { scale: number, filledColor: string, emptyColor: string, data: object, arcDegreeScale: number } | [] | Segments of the arc. Here, scale is a percentage value out of 100%, filledColor for filled part of a segment, emptyColor is background color for an empty segment, data could be any object that you'd want to receive back for a segment, and arcDegreeScale is used to resize each segment. See examples above. | | filledArcWidth | number | 8 | Thickness of progress line | | emptyArcWidth | number | 8 | Thickness of background line | | spaceBetweenSegments | number | 2 | Space between segments | | arcDegree | number | 180 | Degree of arc | | radius | number | 100 | Arc radius | | isAnimated | bool | true | Enable/disable progress animation | | animationDuration | number | 1000 | Progress animation duration | | animationDelay | number | 0 | Progress animation delay | | ranges | Array of strings | [] | Arc ranges (segments) display values | | rangesTextColor | string | '#000000' | Color of ranges text | | rangesTextStyle | object | { fontSize: 12 } | Ranges text styling | | showArcRanges | bool | false | Show/hide arc ranges | | middleContentContainerStyle | object | {} | Extra styling for the middle content container | | capInnerColor | string | '#28E037' | Cap's inner color | | capOuterColor | string | '#FFFFFF' | Cap's outer color | | alignRangesWithSegments | bool | true | This might be useful when using segment[].arcDegreeScale values to customize the size of individual segments. If you'd like the range display to align with the edge of each segment, pass this prop as true. Otherwise, range displays will be distributed evenly across the arc. | | children | function | | Pass a function as a child. It receives metaData with the last filled segment's data as an argument. From there you can extract data object. See example above. | | |

📋 Attributions

Read the Attributions here.

👏 Contributing

Please read our CONTRIBUTING.md for details on our community guidelines and the process for submitting pull requests to us.

🧑‍💻 Maintainers

To find out who our Maintainers are, check out MAINTAINERS.md.

🚅 Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

To update versions, run the yarn version and follow the prompts.

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

📜 Notice

Check out NOTICE.md.

🔒 Security

Check out SECURITY.md.