Skip to content

Commit d24602a

Browse files
ealushealush
committed
1.3.0 Custom Picker Size
1 parent ec7743c commit d24602a

20 files changed

+156
-97
lines changed

‎README.md‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,28 @@ class MyComponent extends Component {
3030

3131
```
3232

33+
## Customization
34+
35+
## Modifying the picker's height and width
36+
By default the picker is 240px wide and ~315px tall (depending on the position of the categories panel). To change the width and height of the picker, simply:
37+
38+
```js
39+
<EmojiPicker width="315" height="280"/>
40+
<EmojiPicker height="280"/> // width will default to 240
41+
<EmojiPicker width="315"/> // height will default to 240
42+
```
43+
A word on height: The height you determine by the height property, is of the emoji-list only, the search and categories panel are added to the height you specify.
44+
45+
![alt tag](https://raw.githubusercontent.com/ealush/emoji-picker/gh-pages/screenshots/5.png)
46+
47+
## Moving the categories panel around
48+
49+
```js
50+
<EmojiPicker nav="top"/> // default. no need to pass nav="top"
51+
<EmojiPicker nav="left"/>
52+
<EmojiPicker nav="bottom"/>
53+
```
54+
3355
## Getting the clicked-on emoji
3456
In order to use the picker in your application, you need a way to grab the name and code of the clicked-on emoji. To do this, you just need to pass the `onEmojiClick` prop. It should be a callback function to your application, and it should get two arguments: the emoji code, and the rest of the emoji data.
3557

@@ -109,14 +131,6 @@ Long clicking on diversity (skin-tone) enabled Emojies (mostly the hand Emojis),
109131

110132
![alt tag](https://raw.githubusercontent.com/ealush/emoji-picker/gh-pages/screenshots/4.png)
111133

112-
## Customization
113-
At the moment, not many customizations are supported (they are coming). You may choose, though, to have the navigation in different locations. You may choose any of the following three:
114-
```js
115-
<EmojiPicker nav="top"/> // default. no need to pass nav="top"
116-
<EmojiPicker nav="left"/>
117-
<EmojiPicker nav="bottom"/>
118-
```
119-
120134
# Attributions
121135
You can use this **picker**, free of charge, no attribution is needed. The emojis have their own license.
122136

‎docs/iframe.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<body>
1717
<div id="root"></div>
1818
<div id="error-display"></div>
19-
<script src="static/preview.119eb4680620fd473286.bundle.js"></script>
19+
<script src="static/preview.52b5a34a5a8fcb43e9b0.bundle.js"></script>
2020
</body>
2121
</html>
2222

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</head>
3939
<body style="margin: 0;">
4040
<div id="root"></div>
41-
<script src="static/manager.68417e5d810376b1e40e.bundle.js"></script>
41+
<script src="static/manager.ef6fecb46e3c429d06e2.bundle.js"></script>
4242
</body>
4343
</html>
4444

‎docs/static/manager.68417e5d810376b1e40e.bundle.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/static/manager.68417e5d810376b1e40e.bundle.js‎ renamed to ‎docs/static/manager.ef6fecb46e3c429d06e2.bundle.js‎

Lines changed: 27 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/manager.ef6fecb46e3c429d06e2.bundle.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/preview.119eb4680620fd473286.bundle.js‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎docs/static/preview.119eb4680620fd473286.bundle.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/static/preview.52b5a34a5a8fcb43e9b0.bundle.js‎

Lines changed: 40 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/preview.52b5a34a5a8fcb43e9b0.bundle.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)