React-options NPM

react-options

Travis

React component for animated toggling of additional options

This is a small and lighweight npm react module built in order to animate additional options pannel, which slides on top on main row content, using pure css animation

Feel free to use and suggest features or improve

Installations

npm install react-options

Usage

import ReactOptions from "react-options";

[...array].map(
    item => (
        <ReactOptions
            key={item.id}
            id={item.id}
            optionsActive={this.state.optionsActive}
            details={this._renderDetails(item)}
        >
            {this._renderMainData(item)}
        </ReactOptions>
    ))

example of data object:

[{
    id: 1,
    mainData: {},
    details: {
        ...
    }
}]

Demo

DEMO

DEMO_image

Basic Expample

class App extends PureComponent {
  state = {
    activeOption: null
  };

  _renderDetails = () => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          background: "black",
          color: "white"
        }}
      >
        <p>details details details details</p>
        <button onClick={() => this.setState({ activeOption: null })}>
          HIDE
        </button>
      </div>
    );
  };

  render() {
    return (
      <div className="App">
        <div>
          <ReactOptions
            key="1"
            id="1"
            optionsActive={this.state.activeOption}
            details={this._renderDetails()}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "center"
              }}
            >
              <p>THIS IS A MAIN DATA BLOCK</p>
              <button onClick={() => this.setState({ activeOption: "1" })}>
                SHOW
              </button>
            </div>
          </ReactOptions>
        </div>
      </div>
    );
  }
}