https://github.com/dwango-js/react-toggle-pattern
React Component that provide toggle pattern
https://github.com/dwango-js/react-toggle-pattern
component react
Last synced: 9 months ago
JSON representation
React Component that provide toggle pattern
- Host: GitHub
- URL: https://github.com/dwango-js/react-toggle-pattern
- Owner: dwango-js
- License: mit
- Created: 2016-05-17T15:27:47.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-16T07:57:54.000Z (almost 8 years ago)
- Last Synced: 2025-04-27T09:04:03.141Z (about 1 year ago)
- Topics: component, react
- Language: JavaScript
- Size: 68.4 KB
- Stars: 16
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-toggle-pattern [](https://travis-ci.org/dwango-js/react-toggle-pattern)
React Component that provide toggle pattern
## Install
Install with [npm](https://www.npmjs.com/):
npm install react-toggle-pattern
## Usage
`react-toggle-pattern` provide three components.
### Insert and Remove pattens
- `` or pattern. This is same with ``
- `` or pattern
- `` and pattern
Put `` into ``.
```js
import {TogglePattern} from "react-toggle-pattern";
class ToggleButton extends React.Component {
render(){
return (
);
}
}
```
It means that
- if `this.props.isEditing` is `true`, show ``
- if `this.props.isEditing` is `false`, show ``
- In the other case, show `null`
### `` Interface
- ``
- `anyAttribute` is any name.
- `anyValue` is any type.
`` and `` has same interface.
### OR AND pattern
#### OR
`` filter child components by **OR** matching.
- find component that match with `a` is `true` or `b` is `false`.
```js
```
Result to:
```html
```
Both components are **or** match with TogglePattern.
#### AND
`` filter child components by **AND** matching.
- find component that match with `a` is `true` and `b` is `false`.
```js
```
Result to:
```html
```
`` is not **and** match with TogglePattern.
### Example
Show component that has truly attribute with ``
```js
const TogglePattern = require("react-toggle-pattern").TogglePattern;
// render
```
Result to ``
----
Show component that match attribute and value with ``
```js
```
Result to ``
Also, it is ok that `value` it `string` type.
```js
```
Result to ``
-----
Show component**s** that match attribute and value with ``.
```js
```
Result to `
`
-----
Not show when not match
```js
```
Result to `null`.
------
OR match
```js
```
Result to `
Visible
Hidden
`.
------
And match
```js
```
Result to ``.
### Show and Hide pattern
It is an experimental pattern.
- ``
It has same interface ``, but it has difference logic.
- It use `hidden` attribute for non-showing element.
- You should add `[hidden]{ display: none!important; };` to own css.
- It always wrapped children components with `
{children}`
**Props**
- `` try to preserve your focus.
- `` missing focus because of inserting and removing.
**Cons**
- Automatically wrap `{this.props.children}` with `div` element.
## Changelog
See [Releases page](https://github.com/dwango-js/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/dwango-js/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