https://github.com/ryym/react-expander
Make a component expandable.
https://github.com/ryym/react-expander
Last synced: about 1 month ago
JSON representation
Make a component expandable.
- Host: GitHub
- URL: https://github.com/ryym/react-expander
- Owner: ryym
- License: mit
- Created: 2016-01-29T13:29:33.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-03-11T01:43:06.000Z (about 9 years ago)
- Last Synced: 2025-03-10T20:44:49.796Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://ryym.github.io/react-expander
- Size: 263 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Expander
Make your component expandable by drag and drop ([demo](https://ryym.github.io/react-expander/)).
Sample code:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import {
allowExpandingIn,
beExpandable
} from 'react-expander';
// Define an expandable component.
const Box = ({ width, height, children }) => {
const style = {
width,
height,
border: '1px solid black',
position: 'relative'
};
return (
{children}
);
};
// Wrap the component by `beExpandable`.
// This passes width and height to Box when expanded.
const ExpandableBox = beExpandable(Box);
// Define a container component.
const Container = ({ expander, expandHandlers }) => {
const containerStyle = {
width: '100%',
height: '200px',
border: '2px solid #ccc'
};
// Specify styles for expanding point.
const expanderStyle = {
border: '1px solid red',
width: '10px',
height: '10px',
position: 'absolute',
bottom: 0,
right: 0,
cursor: 'pointer'
};
return (
);
};
// Wrap the container by `allowExpandingIn`.
// Users can expand Box inside of this container.
const AllowedContainer = allowExpandingIn(Container);
ReactDOM.render(
,
document.getElementById('main'),
);
```