https://github.com/dnbard/react-9-slice

9-slice UI Component for React
https://github.com/dnbard/react-9-slice

Last synced: 10 months ago
JSON representation

9-slice UI Component for React

• Host: GitHub
• URL: https://github.com/dnbard/react-9-slice
• Owner: dnbard
• License: mit
• Created: 2017-09-03T20:18:52.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-05T20:01:14.000Z (almost 9 years ago)
• Last Synced: 2025-04-13T22:34:53.405Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://dnbard.github.io/react-9-slice/
• Size: 813 KB
• Stars: 9
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# REACT-9-SLICE

![logo](https://github.com/dnbard/react-9-slice/blob/master/images/logo.png?raw=true)

React library to create [9-slice image](http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html) surfaces. Check [the demo](https://dnbard.github.io/react-9-slice/)!

## Install

```shell

npm install react-9-slice --save

```

## Usage example

```js

import React, { Component } from 'react';

import React9Slice from 'react-9-slice';

class MyComponent extends Component(){

    render(){

        return 

            HELLO WORLD!

        

    }

}

```

## API

* `width`, `height` - size of the surface

* `border` - size of the non-scalable parts

* `image` - path to the image (you should provide it yourself)

* `imageSize` - initial size of the image

* `style` - styles for the `children`

* `children` - this element are going to be placed in the center of the surface