Zebra block

1. Install zebra-block:

   npm install zebra-block

2. Import component into your project

   import { Zebra } from 'zebra-block';

3. Usage examples:

// Example 1: Default Zebra Block

<Zebra>
  {/* Any content you want to show inside Zebra Block */}
</Zebra>

// Example 2: Zebra Block with JSON Object

const jsonExample = {
  key: 'value',
  nested: { anotherKey: 'anotherValue' },
};
<Zebra json={jsonExample} />

// Example 3: Zebra Block with Custom Colors

<Zebra colors={['#ff9999', '#ffcc99']}>
  {/* Custom content */}
</Zebra>

// Example 4: Zebra Block with Border and Padding

<Zebra border={2} padding={10}>
  {/* Custom content */}
</Zebra>

// Example 5: Zebra Block with fixed Max Height

<Zebra height={150}>
  {/* Custom content */}
</Zebra>

// Example 6: Zebra Block with Custom Styles

<Zebra style={{ borderRadius: '8px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)' }}>
  {/* Custom content */}
</Zebra>

// Example 7: Zebra Block with Custom Element Type

<Zebra as="pre">
  {/* Custom content */}
</Zebra>

// Example 8: Zebra Block with JSON (ignores Children prop)

<Zebra json={jsonExample}>
  {/* This content will be ignored, because JSON prop passed */}
  <p>Custom content</p>
</Zebra>

4. Props:

   | prop | type | default | description | |----------|----------|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | as | string | 'div' | Element type for zebra component | | children | any | undefined | Content displayed inside zebra (but if you pass Json prop - it preferred by default, and children will be ignored) | | color | string | '#fcfcfc77' | color for dashed border if border declared | | border | number | 0 | number for border in pixels | | colors | string[] | ['#fcfcfc77', '#eeeeee77'] | array of two colours for zebra background gradient | | padding | number | undefined | Zebra padding | | height | number | undefined | maxHeight value for zebra | | style | {} | {} | any other styles you want to define for zebra | | json | {} | null | Json object you can display inside of zebra |

5. Development:

   • Run the Storybook for local development:

     npm run storybook

     Explore existing examples in Storybook and add your own stories to showcase different features or use cases for the Zebra block component.

Contributing

This project is open for improvements and maintenance. Feel free to fork and make your own modifications.

License

MIT