Natively Pronounced Mandarin

    @anarock/pebble
    TypeScript icon, indicating that this package has built-in type declarations

    0.46.1 • Public • Published

    pebble

    A set of lightweight and accessible React component written in typescript and emotion.

    Installation

    yarn add @anarock/pebble
    

    Getting started

    First of all you will need to install the fonts and icons used by the Design System. Make sure the below code is executed at the very beginning.

    The easier way is to use the cdn:

    <link
      rel="stylesheet"
      href="https://unpkg.com/@anarock/pebble@[version]/dist/pebble.css"
    />

    💥 Warning: Pebble adds box-sizing: border-box by default to every element by using inherit. If you have some elements whose children which need default box-sizing you can reset it's box-sizing to content-box

    Polyfill

    Pebble intends to have a very small footprint while maintaining performance. This, however, comes at a cost of supporting only modern browsers. If you need to support legacy browsers, you would need to add polyfills.

    <script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.findIndex,IntersectionObserver,Intl.~locale.en,Object.entries,default"></script>

    UMD Usage

    <script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.findIndex,IntersectionObserver,Intl.~locale.en,Object.entries,default"></script>
    <script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@anarock/pebble@latest/dist/pebble.umd.js"></script>
    <script>
      // Components are available in window.pebble
      var Button = pebble.Button;
      var h = React.createElement;
      ReactDOM.render(
        h(
          Button,
          {
            onClick: function() {
              alert("You clicked the button");
            }
          },
          "Click Me!"
        ),
        document.getElementById("root")
      );
    </script> 

    Using icons in React Native

    Add the following in your package.json;

    "rnpm"{
        "assets": {
            "./node_modules/@anarock/pebble/native/icons"
        }
    }

    Then run react-native link. and then it can be used by importing the Icon component.

    import { Icon } from "@anarock/pebble/native";
     
    // Usage
    <Icon name="iconName" size={20} color="#000000" />;

    Acknowledgements

    We use Chromaticqa for visual regression testing and it is awesome.

    License

    MIT

    Keywords

    none

    Install

    npm i @anarock/pebble

    DownloadsWeekly Downloads

    762

    Version

    0.46.1

    License

    MIT

    Unpacked Size

    3.54 MB

    Total Files

    285

    Last publish

    Collaborators

    • pranjal-jain
    • developer_anarock