react-toggle-pattern

React Component that provide toggle pattern

Install

Install with npm:

npm install react-toggle-pattern

Usage

react-toggle-pattern provide three components.

• <TogglePattern /> or pattern. This is same with <ToggleOrPattern />
• <ToggleOrPattern /> or pattern
• <ToggleAndPattern /> and pattern

Put <YourComponent /> into <TogglePattern />.

import {TogglePattern} from "react-toggle-pattern";
class ToggleButton extends React.Component {
    render(){
        return (
            <TogglePattern isEditing={this.props.isEditing}>
                <LeaveEditingButton isEditing={true} />
                <EnterEditingButton isEditing={false} />
            </TogglePattern>
        );
    }
}

It means that

• if this.props.isEditing is true, show <LeaveEditingButton />
• if this.props.isEditing is false, show <EnterEditingButton />
• In the other case, show null

<TogglePattern /> Interface

• <TogglePattern anyAttribute=anyValue />
  • anyAttribute is any name.
  • anyValue is any type.

<ToggleOrPattern /> and <ToggleAndPattern /> has same interface.

OR AND pattern

OR

<ToggleOrPattern /> filter child components by OR matching.

• find component that match with a is true or b is false.

<ToggleOrPattern a={true}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleOrPattern>

Result to:

<div class="TogglePattern ToggleOrPattern">
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</div>

Both components are or match with TogglePattern.

AND

<ToggleAndPattern /> filter child components by AND matching.

• find component that match with a is true and b is false.

<ToggleAndPattern a={true} b={false}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleAndPattern>

Result to:

<LeaveEditingButton a={true} b={false} />

<EnterEditingButton /> is not and match with TogglePattern.

Example

Show component that has truly attribute with <TogglePattern attribute />

const TogglePattern = require("react-toggle-pattern").TogglePattern;
// render
<TogglePattern isEditing={true}>
    <ComponentX isEditing/>
    <ComponentY />
</TogglePattern>

Result to <ComponentX />

---

Show component that match attribute and value with <TogglePattern attribute=value />

<TogglePattern isEditing={false}>
    <ComponentX isEditing={true} />
    <ComponentY isEditing={false} />
</TogglePattern>

Result to <ComponentY />

Also, it is ok that value it string type.

<TogglePattern pattern="one">
    <ComponentX pattern="one"/>
    <ComponentY pattern="two"/>
</TogglePattern>

Result to <ComponentY />

---

Show components that match attribute and value with <TogglePattern attribute=value />.

<TogglePattern isEditing={true}>
    <ComponentX isEditing={true} />
    <ComponentX isEditing={true}/>
</TogglePattern>

Result to <div class="TogglePattern ToggleOrPattern"><ComponentX /><ComponentX /></div>

---

Not show when not match

<TogglePattern isEditing={false}>
    <ComponentX isEditing={true} />
    <ComponentY />
</TogglePattern>

Result to null.

---

OR match

<ToggleOrPattern pattern1={1} pattern2={2}>
    <ComponentX pattern1={1} pattern2={2}/>
    <ComponentY pattern1={1}/>
</ToggleOrPattern>

Result to <div class="TogglePattern ToggleOrPattern"><div>Visible</div><div>Hidden</div></div>.

---

And match

<ToggleAndPattern pattern1={1} pattern2={2}>
    <ComponentX pattern1={1} pattern2={2}/>
    <ComponentY pattern1={1} />
</ToggleAndPattern>
```

Result to `<ComponentX pattern1={1} pattern2={2}/>`.


## Changelog

See [Releases page](https://github.com/azu/react-toggle-pattern/releases).

## Running tests

Install devDependencies and Run `npm test`:

    npm i -d && npm test

## Contributing

Pull requests and stars are always welcome.
For bugs and feature requests, [please create an issue](https://github.com/azu/react-toggle-pattern/issues).

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Author

- [github/azu](https://github.com/azu)
- [twitter/azu_re](http://twitter.com/azu_re)

## License

MIT © azu