react-options

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

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>
    );
  }
}

Tests

npm test

License

MIT

---

This in an initial version of module with minimal core functionality which I neede for my own purposes, hope it might be usefull for others aswell.