Skip to content

Commit a43d477

Browse files
howtomakeaturnhowtomakeaturn
committedNov 25, 2014
Update README.md
·
v1.1.0v1.0.0
1 parent aef9794 commit a43d477

File tree

1 file changed

+182
-1
lines changed

1 file changed

+182
-1
lines changed
 

‎README.md

+182-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,187 @@ React Lightbox is a React plugin for implementing lightbox effect easily with Re
1616

1717
[Communication between elements](http://howtomakeaturn.github.io/react-lightbox/communication-between-elements.html)
1818

19-
# Documentation
19+
# Getting started
20+
21+
To use the lightbox plugin, include the react library, the JSX transformer, and the react-lightbox library inside the tag of your HTML document:
22+
23+
```html
24+
<head>
25+
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
26+
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.js'></script>
27+
<script type="text/jsx" src='react-lightbox.jsx'></script>
28+
</head>
29+
```
30+
31+
Start by telling react-lightbox to render the elements you want when the document is loaded.
32+
Just put them inside the LightboxTrigger element and LightboxModal element:
33+
34+
```html
35+
<body>
36+
<div id='react-canvas'></div>
37+
<script type="text/jsx">
38+
/** @jsx React.DOM */
39+
40+
React.renderComponent(
41+
<Lightbox>
42+
<LightboxTrigger>
43+
<a href='#'>Click me to open!</a>
44+
</LightboxTrigger>
45+
<LightboxModal>
46+
<div>
47+
<h1>This is the basic usage!</h1>
48+
<p>Good luck :D</p>
49+
</div>
50+
</LightboxModal>
51+
</Lightbox>,
52+
document.getElementById('react-canvas')
53+
);
54+
</script>
55+
</body>
56+
```
57+
We done! That’s all you need to do!
58+
Click on the text and you’ll see the beautiful lightbox popup on your browser!
59+
See the [Basic usage](http://howtomakeaturn.github.io/react-lightbox/basic.html).
60+
61+
*NOTE! react-lightbox will auto-bind openLightbox function to the onClick event of the element inside the LightboxTrigger. You don’t need to set the onClick event yourself.*
62+
63+
If you think simply use ‘a’ tag as trigger and ‘p’ tag as the content of lightbox is too simple, you can create custom elements for both LightboxTrigger and LightboxModal:
64+
65+
```html
66+
<body>
67+
<div id='react-canvas'></div>
68+
<script type="text/jsx">
69+
/** @jsx React.DOM */
70+
var ToggleButton = React.createClass({
71+
render: function(){
72+
return(<button onClick={this.props.openLightbox}>Open Lightbox</button>);
73+
}
74+
});
75+
76+
var MyPanel = React.createClass({
77+
onClickSave: function(){
78+
alert('saved!');
79+
this.props.closeLightbox();
80+
},
81+
render: function(){
82+
return (
83+
<div>
84+
<h3>My Panel</h3>
85+
<hr />
86+
<textarea placeholder='Type something here...'></textarea>
87+
<hr />
88+
<button onClick={this.onClickSave}>Save</button>
89+
</div>
90+
);
91+
}
92+
});
93+
React.renderComponent(
94+
<Lightbox>
95+
<LightboxTrigger>
96+
<ToggleButton />
97+
</LightboxTrigger>
98+
<LightboxModal>
99+
<MyPanel />
100+
</LightboxModal>
101+
</Lightbox>,
102+
document.getElementById('react-canvas')
103+
);
104+
</script>
105+
</body>
106+
```
107+
Your custom elements inside LightboxTrigger and LightboxModal will receive ‘openLightbox’ and ‘closeLightbox’ functions automatically. Use them in whatever way you want.
108+
109+
The live example for above code is here: [Custom elements](http://howtomakeaturn.github.io/react-lightbox/custom-element.html).
110+
111+
112+
113+
*NOTE! If you use custom element as trigger, react-lightbox will NOT auto-bind openLightbox for you. Remember to bind it as the example shows.*
114+
115+
# Advanced
116+
117+
Sometimes you need to share variables between elements inside the lightbox. For instance, you want the change the text in the trigger according to the text user type into the textarea in modal. How can we deal with that?
118+
119+
React-lightbox provide ‘setLightboxState’ function to solve this.
120+
First, pass the values you want to share between elements to the Lightbox element ‘data’ props:
121+
122+
```
123+
<Lightbox data={{ content: ''}}>
124+
```
125+
126+
Then you can use this values from the props:
127+
```
128+
<textarea ref='note' defaultValue={this.props.content} placeholder='Type something here...'></textarea>
129+
```
130+
131+
To change the shared value, use the ‘setLightboxState’ function which all children elements will receive automatically.
132+
133+
What happened behind it is easy. Lightbox set the ‘data’ object as state. And then pass every value inside the state to all children as props! So every time you ‘setLightboxState’, all the elements will update automatically!
134+
135+
Here’s a more concrete example:
136+
137+
```
138+
<body>
139+
<div id='react-canvas'></div>
140+
<script type="text/jsx">
141+
/** @jsx React.DOM */
142+
var ToggleText = React.createClass({
143+
render: function() {
144+
var text = this.props.content.trim() ? 'View Notes' : 'Add Notes';
145+
if (this.props.content.trim()){
146+
return ( <a style={{color: 'red'}} href='#' onClick={this.props.onClick}>{text}</a> );
147+
} else {
148+
return ( <a href='#' onClick={this.props.openLightbox}>{text}</a>);
149+
}
150+
}
151+
});
152+
153+
var NotePanel = React.createClass({
154+
155+
clickSave: function(){
156+
var content = this.refs['note'].getDOMNode().value;
157+
this.props.setLightboxState({ content: content});
158+
// you may want to send ajax here
159+
//$.post('/ajax/document/update-note', data);
160+
this.props.closeLightbox();
161+
},
162+
163+
render: function(){
164+
return (
165+
<div>
166+
<h3>Note</h3>
167+
<hr />
168+
<textarea ref='note' defaultValue={this.props.content} placeholder='Type something here...'></textarea>
169+
<hr />
170+
<button onClick={this.clickSave}>Save</button>
171+
</div>
172+
);
173+
}
174+
});
175+
176+
React.renderComponent(
177+
<Lightbox data={{ content: ''}}>
178+
<LightboxTrigger>
179+
<ToggleText />
180+
</LightboxTrigger>
181+
<LightboxModal>
182+
<NotePanel />
183+
</LightboxModal>
184+
</Lightbox>,
185+
document.getElementById('react-canvas')
186+
);
187+
</script>
188+
</body>
189+
```
190+
A live demo for this can be found here:
191+
[Communication between elements](http://howtomakeaturn.github.io/react-lightbox/communication-between-elements.html).
192+
193+
194+
# Requirements
195+
196+
* React
197+
* JSXTransformer
198+
199+
200+
Or you can view the documentation on my blog:
20201

21202
http://blog.turn.tw/?page_id=1027

0 commit comments

Comments
 (0)
Please sign in to comment.