How to use avataaars - 10 common examples
To help you get started, we’ve selected a few avataaars examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fangpenlin / avataaars-generator / src / components / AvatarForm.tsx View on Github 
})
const labelCol = 3
const inputCol = 9
return (
<form>
Avatar Style
<label>
<input checked="{avatarStyle" value="{AvatarStyle.Circle}" name="avatar-style" id="avatar-style-circle" type="radio">{' '}
Circle
</label>{' '}
<label>
<input checked="{avatarStyle" value="{AvatarStyle.Transparent}" name="avatar-style" id="avatar-style-transparent" type="radio">{' '}
Transparent
</label></form>const labelCol = 3
const inputCol = 9
return (
<form>
Avatar Style
<label>
<input checked="{avatarStyle" value="{AvatarStyle.Circle}" name="avatar-style" id="avatar-style-circle" type="radio">{' '}
Circle
</label>{' '}
<label>
<input checked="{avatarStyle" value="{AvatarStyle.Transparent}" name="avatar-style" id="avatar-style-transparent" type="radio">{' '}
Transparent
</label>
</form>interface State {
displayComponentCode: boolean,
displayComponentImg: boolean
}
function capitalizeFirstLetter (text: string) {
return text.charAt(0).toUpperCase() + text.slice(1)
}
export class Main extends React.Component {
static childContextTypes = {
optionContext: PropTypes.instanceOf(OptionContext)
}
static defaultProps = {
avatarStyle: AvatarStyle.Circle
}
state = {
displayComponentCode: false,
displayComponentImg: false
}
private avatarRef: Avatar | null = null
private canvasRef: HTMLCanvasElement | null = null
private optionContext: OptionContext = new OptionContext(allOptions)
getChildContext () {
return { optionContext: this.optionContext }
}
componentWillReceiveProps (nextProps: Props) {updateType
}
])
),
avatarStyle: {
type: UrlQueryParamTypes.string,
updateType
}
}
export class Renderer extends React.Component {
static childContextTypes = {
optionContext: PropTypes.instanceOf(OptionContext)
}
static defaultProps = {
avatarStyle: AvatarStyle.Circle
}
private optionContext: OptionContext = new OptionContext(allOptions)
getChildContext () {
return { optionContext: this.optionContext }
}
componentWillReceiveProps (nextProps: Props) {
this.updateOptionContext(nextProps)
}
componentWillMount () {
this.updateOptionContext(this.props)
}<input checked="{avatarStyle" value="{AvatarStyle.Circle}" name="avatar-style" id="avatar-style-circle" type="radio">{' '}
Circle
{' '}
<label>
<input checked="{avatarStyle" value="{AvatarStyle.Transparent}" name="avatar-style" id="avatar-style-transparent" type="radio">{' '}
Transparent
</label>
{selects}
More options coming soon,{' '}
<a href="http://eepurl.com/c_7fN9">
subscribe for updates</a>type='radio'
id='avatar-style-circle'
name='avatar-style'
value={AvatarStyle.Circle}
checked={avatarStyle === AvatarStyle.Circle}
onChange={this.onAvatarStyleChange}
/>{' '}
Circle
{' '}
<label>
<input checked="{avatarStyle" value="{AvatarStyle.Transparent}" name="avatar-style" id="avatar-style-transparent" type="radio">{' '}
Transparent
</label>
{selects}
More options coming soon,{' '}
<a href="http://eepurl.com/c_7fN9">
subscribe for updates
</a>),
avatarStyle: {
type: UrlQueryParamTypes.string,
updateType
}
}
export class Renderer extends React.Component {
static childContextTypes = {
optionContext: PropTypes.instanceOf(OptionContext)
}
static defaultProps = {
avatarStyle: AvatarStyle.Circle
}
private optionContext: OptionContext = new OptionContext(allOptions)
getChildContext () {
return { optionContext: this.optionContext }
}
componentWillReceiveProps (nextProps: Props) {
this.updateOptionContext(nextProps)
}
componentWillMount () {
this.updateOptionContext(this.props)
}
componentDidMount () {
const anyWindow = window as any
setTimeout(() => {export class Main extends React.Component {
static childContextTypes = {
optionContext: PropTypes.instanceOf(OptionContext)
}
static defaultProps = {
avatarStyle: AvatarStyle.Circle
}
state = {
displayComponentCode: false,
displayComponentImg: false
}
private avatarRef: Avatar | null = null
private canvasRef: HTMLCanvasElement | null = null
private optionContext: OptionContext = new OptionContext(allOptions)
getChildContext () {
return { optionContext: this.optionContext }
}
componentWillReceiveProps (nextProps: Props) {
this.updateOptionContext(nextProps)
}
componentWillMount () {
this.optionContext.addValueChangeListener(this.onOptionValueChange)
this.updateOptionContext(this.props)
}
componentDidMount () {
const anyWindow = window as anyUrlUpdateTypes,
addUrlProps
} from 'react-url-query'
import { fromPairs } from 'lodash'
interface Props {
__render__?: string
avatarStyle: AvatarStyle
onChangeUrlQueryParams: (params: any, updateType: string) => void
onChangeAvatarStyle: (avatarStyle: AvatarStyle) => void
}
const updateType = UrlUpdateTypes.pushIn
const urlPropsQueryConfig = {
...fromPairs(
allOptions.map(option => [
option.key,
{
type: UrlQueryParamTypes.string,
updateType
}
])
),
avatarStyle: {
type: UrlQueryParamTypes.string,
updateType
}
}
export class Renderer extends React.Component {
static childContextTypes = {
optionContext: PropTypes.instanceOf(OptionContext)import AvatarForm from './AvatarForm'
import ComponentCode from './ComponentCode'
import ComponentImg from './ComponentImg'
interface Props {
__render__?: string
avatarStyle: AvatarStyle
onChangeUrlQueryParams: (params: any, updateType: string) => void
onChangeAvatarStyle: (avatarStyle: AvatarStyle) => void
}
const updateType = UrlUpdateTypes.pushIn
const urlPropsQueryConfig = {
...fromPairs(
allOptions.map(option => [
option.key,
{
type: UrlQueryParamTypes.string,
updateType
}
])
),
avatarStyle: {
type: UrlQueryParamTypes.string,
updateType
}
}
interface State {
displayComponentCode: boolean,
displayComponentImg: boolean
